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

Question

I want menu item to be highlighted when an item is selected in the drop down. I tried following code. Code is working if I prevent default behavior of a which I don't want, So I tried using local storage but it is not working, only page refreshes and default Home item of menu is highlighted.

Menu

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

This is Working

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

This is not working

$(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

I think, you have to apply active class on page load event not in click event. your code should be something like as below

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

On every page load, you have to filter out link of current page from your navigation bar and then apply class active in parent. I have posted code for your explanation purpose you have to modify as per your HTML code structure.

Hope, this will work :)