javascript - Active 类重置回原始状态

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>

它确实在单击按钮时添加了事件类，但是，奇怪的是，当您单击导航项时，它基本上会添加事件类，然后立即将其删除/重置回原始状态，因此，我的索引永远保持活跃状态​​。我认为我们可能需要更改 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");
    }
  });
});