How to keep nav menu highlighted after click using js in sidebar

Question

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 exception of the JS, which I have tried to get right but seem to be failing.

Each menu item takes you to a different page. I want the menu item to stay highlighted to show which page you are on once you have linked to that page. I have used CSS to highlight the li using :hover.

I cant work out how or where to place the js to keep it the menu highlighted.

1. Is my JS correct?
2. Where do I place it? directly in sidebar.php under the html? or somewhere else?

Thank you!

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

 .main-nav .main-nav-list li:hover { background-color: #323840; width: 150px; border-radius: 20px; } .main-nav .main-nav-list li:active { background-color: #323840; } 

 <div class="sidebar sidebar-main <?php echo $sidebar_classes; ?>"> <div class="inner-content widgets-container"> <?php generated_dynamic_sidebar($sidebar_name);?> <div class="nav nav-pills nav-stacked main-nav"> <div class="main-nav-holder"> <ul class="main-nav-list"> <li class="active"> <a id="sidebar-questions" href="/dwqa-questions">QUESTIONS</a> </li> <li class=""> <a id="sidebar-ask" href="/dwqa-ask-question">ASK A QUESTION</a> </li> <li class=""> <a id="sidebar-ama" href="/ask-me-anything">AMAs</a> </li> <li class=""> <a id="sidebar-jobs" href="/jobs">JOBS</a> </li> <li class=“"> <a id="sidebar-find" href="/find-a-health-professional">FIND A HEALTH PRO</a> </li> </ul> </li> 

Answer 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. "

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

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

Answer 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