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

一尘不染

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

css

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

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

阅读 426

2020-05-16

共1个答案

一尘不染

我认为您对a:activeCSS选择器的功能感到困惑。这仅会在您单击链接时更改链接的颜色（并且仅在单击期间，即鼠标按钮保持按下的时间）。您需要做的是.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参数。

2020-05-16