html - 在菜单栏中突出显示当前页面

Question

如何在选中页面时更改菜单颜色？

例子:

home faq contact_us

我想显示在菜单栏中选择了哪个页面。我正在使用 CSS，但不确定如何去做。

我的 CSS 代码:

.menu { 
    float: left;
    margin: 0px 0 0 0;
     width: 1000px;
     } 
    .menu li {  
     border-left: 1px solid #fff;
     float: left;
     line-height: 1em;
     text-align: center;} .menu li a {  color: #fff;
     display: block;
     font: 17px Arial, Helvetica, sans-serif;
     padding: 0px 31px;     
     line-height:47px;
     text-decoration: none;
      } 
   .menu li a span {display:block; padding:0px 15px;} 
   .menu li a:hover, .menu  .active a{color:#fff;
    background:#ed1f26 url(images/menuleft.jpg) left top no-repeat;
    width:auto;  
   } 
    .menu li a:hover span, .menu .active a span
   {background: url(images/menuright.jpg) right top no-repeat;
    padding:0px 14px; 
    border:1px solid #b3c302;
  }

Answer 1

好吧，如果您正在为每一页编写菜单(从您的评论看来就是这种情况)，没有什么可以阻止您更改特定 <li> 的背景颜色。与该页面相关。

下面的示例显示当前页面(主页)的白色背景或非事件页面的默认颜色。

<li style="background-color:rgb(255,255,255);">Home</li>
<li>FAQ</li>
<li>Contact Us</li>

或者，您可以使用一些脚本并创建选项卡，就像我在这个 fiddle 中所做的那样:http://jsfiddle.net/gstubbenhagen/zAbmA/

如果您在每个页面上没有太多内容，我只会推荐这些选项卡，因为您不想制作 1 个非常大的页面，因为在较慢的连接上需要永远加载。

注意:如果使用选项卡选项，提供的示例使用 JQuery 插件，如果您不打算重新编码，请确保添加相同的工具。