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-item时，它基本上添加了活动类，然后立即将其删除/重置为原始状态，因此，我的索引永远保持活跃。我认为我们可能需要更改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是我对您的问题的答案。这正是您所需要的：How to use local storage for active class?

活动班级重置回原始状态

2 个答案: