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

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类都被删除了，

我希望它停留在点击的标签上，直到触发另一次点击。

标签： jquerytwitter-bootstrap

Answer 1

你正在做的是在客户端。他们不会坚持下去。使用localStorageCookie 或 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。