Why doesn't my navigation stay highlighted after clicking on it?

Question

I am not sure why my navigation doesn't stay highlighted after clicking on it? I reserached and went through similar forums and I couldn't find any related answers. Here is the javascript code I am using.

<style>

.nav.navbar-nav li a.active{
    background: red !important;
}

</style>

<script>
$(document).ready(function(){
   var activeMenuItem = null;

   $("a").click(function(event){
      // Remove "active" class from the previous active item
      if (activeMenuItem) {
         activeMenuItem.removeClass("active");
      }

      // Add "active" class to the clicked item
      $(this).addClass("active");
      activeMenuItem = $(this);

      // Allow the link to open normally
   });
});
</script>

If I change my javascript to prevent default behavior of click, navigation stays highlighted but the links do not open anymore.

<script>
$(document).ready(function(){
var activeMenuItem = null;
$("a").click(function(event){
event.preventDefault(); // **Prevent the default link behavior**
if (activeMenuItem) {
activeMenuItem.removeClass("active");
}
$(this).addClass("active");
activeMenuItem = $(this);
});
});
</script>

Please guide me as I am still learning javascript/jquery. I do not have access to HTML structure to update

with active class. Thanks.

well links navigate to new pages so it redraws the page..... — epascarello, Aug 17 '23 at 19:11
You have two conflicting things here. You're trying to change the UI of the current page and keep the user on that UI, but you're also trying to navigate the user to a new page. Which is it? If you want to navigate the user to a new page then clearly any changes made to the current page aren't relevant. In that case the goal would be to "highlight the link" on the *next page*. Can that page just default to the link being "highlighted"? Or if you need to supply some data to that page, you could store data in `localStorage` and read it on that next page. — David, Aug 17 '23 at 19:12
https://stackoverflow.com/questions/2397370/change-link-color-of-the-current-page-with-css — epascarello, Aug 17 '23 at 19:14

score 2 · Accepted Answer · answered Aug 17 '23 at 19:19

It seems like what you really want is the current page's anchor to be highlighted when the visitor goes to the new page.

You can do this by looping through the links on the page and comparing their href to that of window.location.href and if they match add the class.

You can always use localStorage too but this will work even when the go to the page via other methods.

$(document).ready(function(){
  //change a to .nav.navbar-nav li a
  $("a").each(function(){
    if($(this).prop("href") == window.location.href){
        $(this).addClass("active")
    }
  });
});

a.active{
    background: red !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://stacksnippets.net/js">test</a>

Why doesn't my navigation stay highlighted after clicking on it?

1 Answers1