活动菜单项突出显示答案

【问题标题】：active menu item highlight活动菜单项突出显示
【发布时间】：2013-12-29 17:12:51
【问题描述】：

我正在尝试突出显示我当前的菜单项

<nav>
        <ul class="sf-menu">
          <li> <a href="" class="active">Home</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Products</a></li>
          <li><a href="">Training</a></li>
          <li class="last"><a href="">contacts</a></li>
        </ul>
      </nav>

jquery代码是

<script type="text/javascript">$(function(){
var url = window.location.href; 
// passes on every "a" tag 
$("#sf-menu a").each(function() {
        // checks if its the same on the address bar
    if(url == (this.href)) { 
        $(this).closest("li").addClass("first active");
    }
});});</script>

我的css脚本是

.sf-menu > li > a:hover, .sf-menu > li.sfHover > a, .sf-menu > li.active > a {
color: #FFFFFF;
background: url(../images/sf-menu-tail.jpg) repeat scroll 0 0 transparent;
box-shadow: 1px 1px #000;
cursor: pointer;
border-left:1px solid #434343;
border-top:1px solid #434343;
padding:6px 29px 10px 29px;
height:15px; }  

.sf-menu > li > ul > li.sfHover > a, .sf-menu li li a:hover, .sf-menu li li a.active {
background: url(../images/sf-menu-tail-1.png) no-repeat 0 0;
color: #FFFFFF;}

.sf-menu > li > li.sfHover > li > a, .sf-menu li li li a:hover, .sf-menu li li li a.active {
background: url(../images/sf-menu-tail-2.png) no-repeat 0 0;
color: #FFFFFF; }

所以我需要高亮当前活动菜单项以显示带有背景图像的活动背景菜单项。请找出我的错误并纠正，以便菜单正常工作

需要添加类（第一个活动）到li

【问题讨论】：

您检查过url 和this.href 的值在某些测试用例中是否相同吗？
好的，还有其他解决方案吗？然后不检查网址
sf-menu 是一个类，您将其视为 jQuery 选择器中的 id。

标签： jquery html css

【解决方案1】：

检查window.location.href 可能没用，但如果你真的需要，请使用：

if(url.indexOf(this.href) !== -1) { 
    $(this).closest("li").addClass("first active");
}

【讨论】：

【解决方案2】：

要突出显示当前活动的菜单项，请参见下面的示例

[演示][1]
  [1]：http://jsfiddle.net/25amc/

【讨论】：

【解决方案3】：

    var storedListItem = sessionStorage.getItem('selectedListItem');
    $("ul.nav > li > a:eq("+(storedListItem)+")").addClass("active");
    $("ul.nav > li").on("click",function(){
        var index = $(this).index('ul.nav > li');
        var selectedListItem = index;
        sessionStorage.setItem('selectedListItem', JSON.stringify(selectedListItem));
    });

当您单击菜单中的列表项时，会存储该列表项的索引，然后将其保存在会话存储中。页面刷新后检索它，然后将活动类添加到该项目索引。将页面显示为活动状态。它解决了这个问题，因为它在页面加载后添加了活动类，因此实际上将其显示为活动的，上面的答案不会这样做

【讨论】：