遍历导航标签并留在其中一个标签上

Question

我使用引导程序3.3.7编写了一个导航标签

<ul class="nav nav-tabs nav-justified">
    <li><a href="#">Concept</a></li>
    <li><a href="#">Code</a></li>
    <li ><a href="#">Read</a></li>
    <li><a href="#">Action</a></li>
</ul>

每次我点击一个标签时，该标签都会被激活，而其他标签则被取消激活，

<script>
    $(document).ready(
        $(".nav-tabs li").on("click", function(){
            $(".nav-tabs li").removeClass("active");
            $(this).addClass("active");
        }));
</script>

它可以很好地与代码配合使用

但是，当我刷新页面时，所有标记active类都已删除，

我希望它保留在clicked标签上，直到触发另一次点击为止。

Answer 1

您正在做的是在客户端。而且它们不会持久。即使在页面重新加载后，也可以使用localStorage或Cookies来实现持久状态。

此外，您的以下代码无法正常工作并引发错误。 更正的代码为：

$(document).ready(function() {
  $(".nav-tabs li").on("click", function() {
    $(".nav-tabs li").removeClass("active");
    $(this).addClass("active");
  });
});

因此，每次发生点击事件时，设置localStorage ：

$(document).ready(function() {
  $(".nav-tabs li").on("click", function() {
    $(".nav-tabs li").removeClass("active");
    $(this).addClass("active");
    localStorage.setItem("active", $(this).text().trim());
  });
});

然后，当您加载页面时，设置active类：

$(document).ready(function() {
  $(".nav-tabs li").each(function () {
    if (typeof localStorage.getItem("active") != "undefined" && $(this).text().trim() == localStorage.getItem("active"))
      $(this).addClass("active");
  });
  $(".nav-tabs li").on("click", function() {
    $(".nav-tabs li").removeClass("active");
    $(this).addClass("active");
    localStorage.setItem("active", $(this).text().trim());
  });
});

代码段

$(document).ready(function() {
  $(".nav-tabs li").each(function() {
    if (typeof localStorage.getItem("active") != "undefined" && $(this).text().trim() == localStorage.getItem("active"))
      $(this).addClass("active");
  });
  $(".nav-tabs li").on("click", function() {
    $(".nav-tabs li").removeClass("active");
    $(this).addClass("active");
    localStorage.setItem("active", $(this).text().trim());
  });
});

.active {font-weight: bold;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs nav-justified">
  <li><a href="#">Concept</a></li>
  <li><a href="#">Code</a></li>
  <li><a href="#">Read</a></li>
  <li><a href="#">Action</a></li>
</ul>

注意：StackSnippets不允许localStorage。请检查以下各项的输出：JSBin。

Answer 2

首先将ID添加到您的标签页

dotnet