Question

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

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

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

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

Answer 1

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

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

Answer 2

要突出显示当前活动菜单项，请参阅以下示例

[DEMO][1]
  [1]: http://jsfiddle.net/25amc/

Answer 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));
    });

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

活动菜单项突出显示

3 个答案: