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

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

$(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代码结构进行修改。

希望，这将有效：）

如何使用jquery突出显示bootstrap下拉菜单的活动菜单？

1 个答案: