切换类在新页面加载时删除

Question

我让我的链接看起来像标签，这实际上是一个过滤器。这是有问题的部分：

<div class="submenu">
  <div class="row d-flex flex-items-md-between">
      <div class="col-md-8 flex-md-bottom">
          <ul class="nav nav-tabs" role="tablist">
              <li class="nav-item">
                  <a class="nav-link tab active" href="/admin/gifts?filter=review" role="tab">Review</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link tab" href="/admin/gifts?filter=accepted-redeemed" role="tab">Redeemed</a>
              </li>
          </ul>
      </div>
  </div>
</div>

这是我的查询

$(document).ready(function () {
  $('ul.nav-tabs a').click(function () {
    // event.preventDefault();
    $('.nav-link tab').removeClass('active');
    $(this).toggleClass('active');
  });
});

因此，当我"单击"转到

新页面的"选项卡"时，发生的情况是应用了新的活动，旧的活动没有被删除，而不是重新加载原始评论时应用了活动而不是已兑换。我该如何解决这个问题？

如果我在回调中添加事件并运行 event.preventDefault（）; 它不会转到新页面。

这是一个jsbin：http://jsbin.com/poxobejowe/2/edit?html,js,output

Answer 1

是的，当页面重新加载时，它会重置。你可以做的是，你可以使用Cookie或LocalStorage（我最喜欢的）来存储状态，读取状态数据并重做它。一个简单的片段将是：

$(function () {
  $("div").click(function () {
    $(this).toggleClass("on");
    localStorage.setItem("state", (($("div").hasClass("on")) ? "on" : "off"));
    console.log("Local Storage Set to: " + (($("div").hasClass("on")) ? "on" : "off"));
  });
  if (!!localStorage.getItem("state") && localStorage.getItem("state") == "on")
    $("div").addClass("on");
  else if (!!localStorage.getItem("state") && localStorage.getItem("state") != "on")
    $("div").removeClass("on");
});

.on .n {display: inline;}
.n,
.on .f {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click to toggle</p>
<div class="on">
  <span class="n">On</span>
  <span class="f">Off</span>
</div>

上面的代码片段是沙盒的。请查看 JSBin 输出。