CSS：如何更改活动导航页面菜单的颜色答案

【问题标题】：CSS: How to change colour of active navigation page menuCSS：如何更改活动导航页面菜单的颜色
【发布时间】：2012-07-08 02:53:14
【问题描述】：

我正在尝试更改用户在我的网站上选择的活动或当前页面导航链接的颜色。我究竟做错了什么？谢谢。

到目前为止，CSS 看起来像这样：

div.menuBar
{
   font-family: BirchStd;
   font-size: 40px;
   line-height: 40px;
   font-weight: bold;
   text-align: center;
   letter-spacing: -0.1em;
}

div.menuBar li{list-style:none; display: inline;}
div.menuBar li a:active{color:#FF0000;}
div.menuBar ul{margin:0;}

我的 HTML 使用 include PHP 函数调用导航菜单的页面模板：

<div class="menuBar">
  <ul>
  <li><a href="index.php">HOME</a></li>
  <li><a href="two.php">PORTFOLIO</a></li>
  <li><a href="three.php">ABOUT</a></li>
  <li><a href="four.php">CONTACT</a></li>
  <li><a href="five.php">SHOP</a></li>
 </ul>

【问题讨论】：

标签： css navigation

【解决方案1】：

我认为您对a:active CSS 选择器的作用感到困惑。这只会在您单击它时更改链接的颜色（并且仅在单击期间，即您的鼠标按钮保持按下状态）。您需要做的是引入一个新类，例如.selected 到你的 CSS 中，当你选择一个链接时，用新的类更新选定的菜单项，例如

<div class="menuBar">
    <ul>
        <li class="selected"><a href="index.php">HOME</a></li>
        <li><a href="two.php">PORTFOLIO</a></li>
        ....
    </ul>
</div>

// specific CSS for your menu
div.menuBar li.selected a { color: #FF0000; } 
// more general CSS
li.selected a { color: #FF0000; }

您需要更新模板页面以接受selectedPage 参数。

【讨论】：

非常感谢您的快速回复！像魅力一样工作:)
嗨@James，“您需要更新模板页面以接收 selectedPage 参数”是什么意思。

【解决方案2】：

CSS :active 状态表示单击链接的活动状态 - 例如，当您单击它但尚未释放鼠标按钮时。它不知道您在哪个页面上，也无法对菜单项应用任何样式。

要解决您的问题，您必须创建一个类并将其手动添加到当前页面的菜单中：

a.active { color: #f00 }

<ul>
    <li><a href="index.php" class="active">HOME</a></li>
    <li><a href="two.php">PORTFOLIO</a></li>
    <li><a href="three.php">ABOUT</a></li>
    <li><a href="four.php">CONTACT</a></li>
    <li><a href="five.php">SHOP</a></li>
</ul>

【讨论】：

【解决方案3】：

为活动/当前页面添加 ID current：

<div class="menuBar">
  <ul>
  <li id="current"><a href="index.php">HOME</a></li>
  <li><a href="two.php">PORTFOLIO</a></li>
  <li><a href="three.php">ABOUT</a></li>
  <li><a href="four.php">CONTACT</a></li>
  <li><a href="five.php">SHOP</a></li>
 </ul>

#current a { color: #ff0000; }

【讨论】：