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>的背景颜色。

下面的示例显示当前页面（Home）的白色背景或非活动页面的默认颜色。

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

或者你可以使用一些脚本并像我在这个小提琴中那样创建标签：http://jsfiddle.net/gstubbenhagen/zAbmA/

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

注意： 如果使用tabs选项，则提供的示例使用JQuery插件，如果您不打算重新编码，请确保添加相同的工具。< / p>

突出显示菜单栏中的当前页面

1 个答案: