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

并采用包括PHP函数我的HTML呼吁导航菜单页面模板：

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

来源

2012-07-08 Steven

我觉得你越来越感到困惑的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。

来源

2012-07-08 11:20:13 James

非常感谢您的快速响应！工作就像一个魅力:) – Steven 2012-07-08 11:39:04

嗨@詹姆斯你的意思是“你将需要更新您的模板页面采取selectedPage参数。” – Pan 2015-11-23 14:57:44

添加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; }

来源

2012-07-08 11:15:27

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>

来源

2012-07-08 11:18:42

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

回答

相关问题