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

Question

我想要改变用户在我的网站上选择的当前页面导航链接的颜色。我做错了什么?谢谢。

到目前为止，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>

- Steven

Answer 1

我认为你对 a:active CSS 选择器的作用有些混淆了。该选择器仅会在你单击链接时更改其颜色（仅限于单击持续时间即鼠标按钮按下的时间）。你需要做的是在你的 CSS 中引入一个新类，例如 .selected，当你选择一个链接时，使用新类更新已选菜单项。

<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

---

非常感谢您的快速回复！运行得非常好 :) - Steven

嗨 @James，你说的“您需要更新您的模板页面以接受一个selectedPage参数。”是什么意思？ - likeGreen

Answer 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>

- Zoltan Toth

Answer 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; }

- Nikola K.