突出显示菜单栏中的当前页面 [英] Highlight the current page in the menu bar

问题描述

如何在选择网页时更改菜单颜色？

How can I change the menu color when the page is selected?

例如：

home faq contact_us

home faq contact_us

我想显示在菜单栏中选择的页面。我使用的是CSS但不知道如何去解决这个问题。

I want to show which page is selected in the menu bar. I'm using CSS but not sure how to go about this.

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

推荐答案

将菜单写入每个页面（从您的评论看起来似乎是这样），没有什么可以阻止您更改与该页面相关的特定< li> 的背景颜色。

Well, if you're writing the menu to each page (as seems to be the case from your comments) there's nothing stopping you from changing the background colour for the specific <li> related to that page.

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

Example below showing white background for current page (Home) or default colour for non-active pages.

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

或者，您可以使用一些脚本并创建标签，如我在这个小提琴： http://jsfiddle.net/gstubbenhagen/zAbmA/

Alternatively you could use some script and create tabs like I have done in this fiddle: http://jsfiddle.net/gstubbenhagen/zAbmA/

我只会推荐的选项卡，如果你没有太多的内容在每个页面，因为你不想做一个非常大的页面，永远加载在较慢的连接。

I would only recommend the tabs if you don't have too much content on each page as you don't want to make 1 very large page which takes forever to load on slower connections.

注意： 如果使用tabs选项提供的示例使用JQuery插件，工具，如果你不打算重新编码。

NOTE: If using the tabs option the example provided uses a JQuery plugin, make sure you add the same tools if you are not going to re-code.

这篇关于突出显示菜单栏中的当前页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！