给活动页面的菜单项一个“选定”id以更改CSS的最有效方法是什么?

建议;不要定义你的风格是什么,定义你的风格是什么。不要叫它“黑色”,而要叫它“最新”。

.current
{
    background-color: #000;
}

要将其与页面关联,您可以在页面上设置一个变量,指示其所在的页面,然后使用if块或switch case将样式添加到与当前页面相关的元素中:

(伪代码,我的PHP语法生锈)

$current_page = "B"

// -- snip --

<ul>
    <li id="navigation-a" <? if ($current_page == "A") { ?> class="current" <? } ?> >Page A</li>
    <li id="navigation-b" <? if ($current_page == "B") { ?> class="current" <? } ?> >Page B</li>
</ul>

或者,您可以尝试从请求中的页面url派生$current_页面。

要指定应将哪个页面视为活动页面,可以使用类似以下代码:

$currentPage = "b.php";

由于每个菜单项至少需要两个变量(名称、url),因此我使用数组 每个条目的菜单数组。例如:

$menu = array(array("a.php", "A Title"), array("b.php", "B Title"), array("c.php", "C Title"));

现在,为了让PHP发挥神奇的作用,我使用了一个foreach循环,它贯穿每个项目,并以我想要的任何方式显示它。

foreach($menu as $num => $options){
  $s = ((isset($activePage) && $options[0] == $activePage) OR ($options[0] == basename($_SERVER['PHP_SELF'])) ? " class=\"active\"" : "";
  echo "\n\t<li{$s}><a href=\"" . $options[0] . "\">" . $options[1] . "</a></li>";
}

这种方式的美妙之处在于,你不必为每个项目写那么多。您只需复制/粘贴所有内容,并更改$menu数组中的小位,如果需要(即对于子菜单项),请指定$currentPage。如果未指定$currentPage,它将返回到检查当前页面是什么(通过$_SERVER['PHP_SELF'])并基于此检查活动状态。

我希望我解释得足够好,并且它足够好让你使用!

(小免责声明,I 醒来后,从头开始写这段代码。虽然这个概念很管用,但我已经用了好几年了,我可能在这里或那里打错了。如果是这种情况,请道歉!)

您可以将类或id分配给 <body> 与当前页面相关的元素。然后使用此选项设置每个页面的本地导航等样式。为每个导航列表项指定一个与链接指向的内容相关的类。

即。

ul.navigation a:link, ul.navigation a:visited {background-color:#eee}
ul.navigation a:active, ul.navigation a:hover, ul.navigation a:focus {background-color:#ccc}

body.about-us .navigation li.about-us-link a:link, body.about-us .navigation li.about-us-link a:visited {background-color:#000}