保持菜单项突出

我有一个菜单：http://jsfiddle.net/hu5x3hL1/1/保持菜单项突出

HTML

<ul id="menu" class="sidebar"> 
<li> <a href="#" class="clickme">Menu</a> 
    <ul id="menu1"> 
     <li><a class="dropdown-class-name" href="#">Dropdown link1</a></li> 
     <li><a class="dropdown-class-name" href="#">Dropdown link2</a></li> 
    </ul> 
</li>

jQuery的

$('#menu1 li a').click(function(e) { 
    $('a').removeClass('dropdown-class-name active'); 
    $(this).addClass('dropdown-class-name active'); 
});

CSS

#menu1 li a.active{ 
    font-weight:bold; 
}

活动菜单项以粗体突出显示。但在我的网站上点击某个下拉链接时，新页面打开，但活动菜单项已不是粗体。如何在网站的新页面上以粗体突出显示？

我试着这样做：

$(document).ready(function() { 
     var url = window.location.href; 
     $("#menu1 li a").click(function() { 
      if (url == (this.href)) { 
       $('a').removeClass('dropdown-class-name active'); 
       $(this).addClass('dropdown-class-name active'); 
      } 
     }); 
    });

我认为这是正确的想法，但如果可以的错误？

来源

2014-10-11 Mia

您必须删除'$（“＃menu1 li a”）。click（）'事件。这段代码必须在文档加载时运行，而不是单击按钮。 – emmanuel 2014-10-11 17:27:44

我也尝试使用'each'而不是'click'，但结果是一样的 – Mia 2014-10-11 17:35:30

请尝试** ** url **和** this.href **的alert（）**以确保比赛。 – emmanuel 2014-10-11 17:36:37

问题是，当您单击链接时，它会导致菜单重新加载并丢失活动链接的状态。您将菜单项设置为旧页面上的活动状态，然后浏览器会将页面移至新页面，此时页面不再活动，因为HTML会再次加载，并且菜单项上没有任何活动类别设置。

您需要做的是在页面加载时使用Javascript函数来检查哪个菜单项对应于当前URL并将该项设置为活动状态。因此，它会在链接被关注后设置活动类&新页面已加载，您将在新页面上真正看到它。

$(document).ready(function() { 
    var url = window.location 

    var menuItem = $('#menu1 li a').filter(function() { 
    return this.href == url; 
    }) 

    menuItem.addClass('active'); 
})

来源

2014-10-11 17:37:55 t0mppa

我理解了这个想法，但是你的代码的结果是一样的 – Mia 2014-10-11 17:51:00

在没有更多提示的情况下提供更多帮助有点困难。在你的问题中，所有的链接共享相同的URL，因此当通过URL比较链接时，这是一种全部或者全部的情况。 – t0mppa 2014-10-12 17:46:26

当我使用这个代码时，我有2个问题：1）'this.href'的警报返回'undefined' 2）如果我使用一些链接而不是'this.href'，在网站的新页面上所有菜单项大胆 – Mia 2014-10-12 19:53:42

保持菜单项突出

回答

相关问题