Question

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

我认为这是正确的想法，但哪里可能出错？

Answer 1

问题是，当您单击链接时，会导致重新加载菜单并丢失活动链接的状态。您在旧页面上设置了激活的菜单项，然后浏览器会跟随页面到新页面，因为HTML再次加载并且没有任何活动状态在菜单项上设置的类。

您需要做的是在页面加载时使用Javascript函数来检查哪个菜单项对应于当前URL并将该项设置为活动状态。因此，它会在跟踪链接之后设置活动类别＆amp;新页面已加载，您实际上会在新页面上看到它。

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

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

  menuItem.addClass('active');
})

保持菜单项突出显示

1 个答案: