CSS：如何更改活动导航页面菜单的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11382664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: How to change colour of active navigation page menu
提问by Steven
I'm trying to change the colour of the active or current page navigation link which is selected by the user on my website. What am I doing wrong? Thanks.
我正在尝试更改用户在我的网站上选择的活动或当前页面导航链接的颜色。我究竟做错了什么？谢谢。
So far the CSS looks like this:
到目前为止，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;}
And my HTML calls a page template for the navigation menu using the include PHP function:
我的 HTML 使用包含 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>
回答by James
I think you are getting confused about what the a:activeCSS selector does. This will only change the colour of your link when you click it (and only for the duration of the click i.e. how long your mouse button stays down). What you need to do is introduce a new class e.g. .selectedinto your CSS and when you select a link, update the selected menu item with new class e.g.
我认为您对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; }
You will need to update your template page to take in a selectedPageparameter.
您需要更新模板页面以接收selectedPage参数。
回答by Zoltan Toth
The CSS :activestate means the active state of the clicked link - the moment when you clicked on it, but not released the mouse button yet, for example. It doesn't know which page you're on and can't apply any styles to the menu items.
CSS:active状态意味着被点击链接的活动状态——例如，当你点击它但尚未释放鼠标按钮的那一刻。它不知道您在哪个页面上，也不能对菜单项应用任何样式。
To fix your problem you have to create a class and add it manually to the current page's menu:
要解决您的问题，您必须创建一个类并将其手动添加到当前页面的菜单中：
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>
回答by Nikola K.
Add ID currentfor active/current page:
current为活动/当前页面添加 ID ：
<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; }
