如何使用jquery突出显示引导程序下拉菜单的活动菜单？

Question

我希望在下拉列表中选择项目时突出显示菜单项。我试着遵循密码。如果我阻止了我不想要的默认行为，那么代码是可以工作的，所以我尝试使用本地存储，但是它不起作用，只有页面刷新和默认主菜单项被高亮显示。

菜单

<ul class="nav navbar-nav">
    <li class="active"><a href="index.php">Home</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Fire &amp; Water <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="water-damage-restoration.php">Water Damage</a></li>
        <li><a href="fire-smoke-damage-restoration.php">Fire Damage</a></li>
        <li><a href="storm-flooding-restoration.php">Storm Damage</a></li>
        <li><a href="commercial-restoration-services.php">Commercial Restoration</a></li>
      </ul>
    </li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Mold <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
            <li><a href="mold-remediation.php">Mold Remediation</a></li>
            <li><a href="black-mold.php">What is Black Mold?</a></li>
            <li><a href="mold-removal.php">Mold "Removal" vs Remediation</a></li>
            <li><a href="commercial-mold-removal.php">Commercial Mold Remediation</a></li>
        </ul>
    </li>
</ul>

这起作用了

$(document).ready(function(){
    $(".dropdown-menu li a").click(function(e){
        e.preventDefault();
        var hrefs = $(this).attr('href');
        alert("hrefs : " + hrefs);
        $("li").removeClass('active');
        $('a[href="' + hrefs + '"]').parents('li').addClass('active');
    });
});

这不管用

$(document).ready(function(){
    $(".dropdown-menu li a").click(function(){
        var hrefs = $(this).attr('href');
        alert("hrefs : " + hrefs);
        localStorage.setItem('activeTab', hrefs);
        var activeTab = localStorage.getItem('activeTab');
        $("li").removeClass('active');
        alert("activeTab : " + activeTab);
        $('a[href="' + activeTab + '"]').parents('li').addClass('active');
    });
});

Answer 1

我认为，您必须在页面加载事件上应用active类，而不是在单击事件中。您的代码应该如下所示

$(document).ready(function(){
    // activate left navigation based on current link
    var current_url = window.location;
    $('.dropdown-menu li a').filter(function () {
        return this.href == current_url;
    }).last().parents('li').addClass('active');
});

在每次加载页面时，必须从导航栏中筛选出当前页的链接，然后在父级中应用活动类。我已经张贴了你的解释的代码，你必须根据你的HTML代码结构修改。

希望，这将有效:)