什么是最有效的方式来给活动页面的菜单项“选择”ID来更改CSS？

假设我有5页：A，B，C，D和E.我也有一个水平菜单，每个项目都有浅灰色背景。什么是最有效的方式来给活动页面的菜单项“选择”ID来更改CSS？

每个菜单项有：悬停，给它一个中等灰色的背景，但我想在活动页面有一个黑色的背景，所以我定义

#black { 
    background-color: #000; 
}

现在，当用户是B. PHP，我想B菜单项携带＃黑名单。这样做的最好方法是什么？

来源

2009-01-10 Logan Serman

建议;不要定义你的风格“是”，定义你的风格“做”。不要称之为＃黑色，而是将其称为.current。

需要注意的另一件事是，ID是用于识别独特的元素（#header，#footer，#main，#sidebar，#navbar等）。因为可以有多个与元素相关联的类，但只有一个ID，所以将一个可重复项目定义为当前应该用一个类来完成。再次，该ID被保留用于唯一的命名。

.current 
{ 
    background-color: #000; 
}

要与页面相关联这一点，你可以在页面上设置一个变量，表示该页面其上，那么如果块使用，或开关的情况下，将样式添加到涉及当前元素页：

（伪代码，我的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_PAGE。

来源

2009-01-10 06:12:06 Soviut

这就是我做这件事的方式，据我所知这是最好的办法。如果你真的对你的页面分配变量真的很挑剔，你可以使用PHP给你的网址，并检查，而不是，虽然一个变量就好了。 – 2009-01-10 06:15:06

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

即。

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}

来源

2009-01-10 06:11:20 dylanfm

有趣。从来没有想到这一点。 – 2009-01-10 16:44:23

当我可以将PHP用于一个项目（不支持CMS）时，我通常使用PHP数组来构造菜单。从数组中添加，移动或删除页面非常容易，并且让PHP将其作为真正的菜单输出，您不必一遍又一遍重写相同的代码。

指定哪些页面应该被认为是积极的，可以使用类似下面的代码：

$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']），并基于该页面的活动状态。

我希望我解释得很好，而且它足够让您使用！

（小声明，我只是醒来，并从头开始写这段代码。虽然这个概念的工作原理 - 我已经使用了多年，我可能在这里和那里做了一个错字。是这样！）

来源

2009-01-10 06:56:31 Dave

经常使用这个更简单的导航以及。 +1 – 2009-01-10 16:46:07

什么是最有效的方式来给活动页面的菜单项“选择”ID来更改CSS？

回答

相关问题