Active class reset back to original state

Question

I have a navbar with following settings:-

  <li class="nav-item active">
        <a class="btn btn-outline-primary" href="/Index">Home<span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="btn btn-outline-primary" href="/Root/About">About</a>
    </li>
    <li class="nav-item">
        <a class="btn btn-outline-primary" href="/Root/Contact">Contact</a>
    </li>
    <li class="nav-item">
        <a class="btn btn-outline-primary" href="/Search/LatestChanges">@Localizer["menu_LatestChanges"]</a>
    </li>

javascript file, which helps to add and to remove active class

<script>
    var btns = document.getElementsByClassName("nav-item");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function () {
            var current = document.getElementsByClassName("active");
            current[0].className = current[0].className.replace(" active", "");
            this.className += " active";
        });
    }

</script>

It does add the active class on button click, however, a strange thing is when you click on nav-item, it basically adds the active class and then remove/reset it back immediately to the original state, therefore, my Index remains active forever. I think we might need to change javascript logic. Your help is highly appreciated. Thanks

Is your page a single page application or redirect to server on every click? In that case you code will get executed, but class will reset on page reload. — kiranvj, Sep 29 '18 at 11:53
actually active state (or selected menu) in a page should come from the backend (if this is a multipage application). — trk, Sep 29 '18 at 12:15

KUMAR · Answer 1 · 2018-09-29T12:09:45.377

you are assigning a class on click, but when user click the menu item it reloads the page(except if you are using one page website),

use the following code instead of your current code to add active class to current menu item, modified few lines of your code.

var currentUrl = document.location.href;
   
var btns = document.getElementsByClassName("nav-item");
for (var i = 0; i < btns.length; i++) {
if(currentUrl.includes(btns[i].children[0].pathname)){
    btns[i].children[0].classList.add("active");
  }
}

using jQuery we can make the above code more simpler, check the jquery version below, it requires you to add jquery lib to your template

jQuery(document).ready(function(){

var currentUrl = document.location.href;
var btns = jQuery(".nav-item > a");
  btns.each(function(i,v){
    if(currentUrl.includes(v.pathname)){
      jQuery(v).addClass("active");
    }
  });
});

You Nguyen · Answer 2 · 2018-09-29T11:39:43.997

0

Because whenever you clicked on the nav-item, the whole webpage will be reloaded. That's why "it back immediately to the original state" as you saw.

In order to implement this functionality. You might consider using the localStorage for storing the last-active nav, then retrieve it whenever loading a new document. Using localStorage is my answer to your problem. This is exactly what you need: How to use local storage for active class?

edited Sep 29 '18 at 11:39

answered Sep 29 '18 at 11:10

You Nguyen

9,961
4
26
52

What is the fix? – Urgen Sep 29 '18 at 11:29
you're using .NET technology for the back-end, right? Cuz this functionality looks like the backend's job. However, you might consider using the `localStorage` for storing the `last-active` nav, then retrieve it whenever loading a new document. Using `localStorage` is my answer for your problem. This is exactly what you need: https://stackoverflow.com/questions/20595982/how-to-use-local-storage-for-active-class – You Nguyen Sep 29 '18 at 11:36

Active class reset back to original state

2 Answers2