How To Keep Nav Menu Highlighted After Click Using Js In Sidebar

I have created a nav menu in Wordpress and placed it in sidebar.php in my child theme. My nav menu is in the correct location and functions and looks as it should with the except

Solution 1:

I assume that you don't use any router to remain on the same page. If so, then once a user clicks on any link, a browser will load completely new page and so this code of yours

$('.main-nav-list').on('click', function () {
    $('li.active').removeClass('active');
    $(this).addClass('active');

});

has no effect, because it modified the previous page that is now replaced by the new page. The one thing I think you can do on page load is to read pathname and highlight a corresponding link. Here is an example of how this can be done

<script>
    jQuery(function () {
        var pathname = document.location.pathname;
        console.log('the pathname is: ', pathname);

        jQuery('.main-nav-list a').each(function () {
            var value = jQuery(this).attr('href');
            if (pathname.indexOf(value) > -1) {
                jQuery(this).closest('li').addClass('active');
                return false;
            }
        })
    });
</script>

And remove active class from all li elements in html.

I used jQuery instead of $ because of this:

"When WordPress’ jQuery is loaded, it uses compatibility mode, which is a mechanism for avoiding conflicts with other language libraries.

What this boils down to is that you can’t use the dollar sign directly as you would in other projects. When writing jQuery for WordPress you need to use jQuery instead. "

Solution 2:

Use this javascript function. This function will track the url from browser and will add the "active" class to the link.

Hope this will work for you.

Good Luck & Happy Coding.. :)

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
        <li><a href="/clients/">Clients</a></li>
        <li><a href="/contact/">Contact Us</a></li>
    </ul>
</nav>  

$(function() {
  $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

Solution 3:

1.Your jQuery click handler is binded to 'ul' tag which is incorrect, becouse inside callback function context of 'this' is represented by 'ul' instead of clicked li. Your code should looks like:

$('.main-nav-list li').on('click', function () {
    $('li.active').removeClass('active');
    $(this).addClass('active');
});

2. If you are changing page with reloading you can store your navbar state in sessionStorage or get it from path.

Solution 4:

try this: Sample

HTML

<ul class="menu-sample">
  <li class="menu-item-sample active"><a href="http://google.com">link 1 here</a></li>
  <li class="menu-item-sample"><a href="http://google.com">link 2 here</a></li>
  <li class="menu-item-sample"><a href="http://google.com">link 3 here</a></li>
  <li class="menu-item-sample"><a href="http://google.com">link 4 here</a></li>
  <li class="menu-item-sample"><a href="http://google.com">link 5 here</a></li>
</ul>

CSS:

.menu-sample {
  list-style: none;
  padding: 5px;
}

.menu-item-sample:hover {
  background-color: red;
}

.menu-item-sample.active {
  background-color: blue;
}

JS:

$('.menu-item-sample').on('click', function() {
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
});

I hope to have helped in some way