Активный класс сбрасывается обратно в исходное состояние

Question

У меня есть панель навигации со следующими настройками: -

  <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, который помогает добавлять и удалять активный класс

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

Он добавляет активный класс на кнопкущелчок, однако, странная вещь, когда вы нажимаете на элемент nav, он в основном добавляет активный класс, а затем немедленно удаляет / сбрасывает его обратно в исходное состояние, поэтому мой индекс остается активным всегда.Я думаю, что нам может понадобиться изменить логику JavaScript.Ваша помощь высоко ценится.Спасибо

Answer 1

вы назначаете класс по клику, но когда пользователь щелкает пункт меню, он перезагружает страницу (кроме случаев, когда вы используете веб-сайт на одну страницу),

используйте следующий код вместо вашего текущего кода, чтобы добавить активный класс к текущему пункту меню, изменив несколько строк вашего кода.

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");
  }
}

с помощью jQuery мы можем упростить приведенный выше код, проверьте версию jquery ниже, она требует добавления jquery lib в ваш шаблон

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");
    }
  });
});

Answer 2

Поскольку всякий раз, когда вы нажимаете на nav-item, вся веб-страница будет перезагружена .Вот почему "немедленно верните его в исходное состояние" , как вы видели.

Для реализации этой функциональности.Вы можете использовать localStorage для хранения навигации last-active, а затем извлекать ее при загрузке нового документа.Использование localStorage - мой ответ на вашу проблему.Это именно то, что вам нужно: Как использовать локальное хранилище для активного класса?