CSS：如何更改活动导航页面菜单的颜色 [英] CSS: How to change colour of active navigation page menu

问题描述

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

到目前为止，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;} 
  pre> 
 
 
我的HTML使用include PHP函数调用导航菜单的页面模板：
 < div class =menuBar> 
< ul> 
< li>< a href =index.php>首页< / 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> 
  
 
解决方案> 
我想你对于 a：active  CSS选择器有什么困惑。这只会更改您点击链接时的颜色（并且只在点击期间，即您的鼠标按钮停留多长时间）。您需要做的是引入一个新类 .selected 到您的CSS，当您选择一个链接时，用新类更新所选菜单项
 < div class =menuBar> 
< ul> 
< li class =selected>< a href =index.php>首页< / a>< / li> 
< li>< a href =two.php> PORTFOLIO< / a>< / li> 
 .... 
< / ul> 
< / div> 
 
 //菜单的特定CSS 
 div.menuBar li.selected a {color：＃FF0000; } 
 //更一般的CSS 
 li.selected a {color：＃FF0000; } 
  
您需要更新模板页面以接受 / code>参数。
 
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:
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:
<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>
解决方案
I think you are getting confused about what the a:active CSS 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. .selected into your CSS and when you select a link, update the selected menu item with new class e.g.
<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 selectedPage parameter.

                        
这篇关于CSS：如何更改活动导航页面菜单的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！