javascript - toggleClass 在新页面加载时删除

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>

这是我的jquery

$(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

是的，它会在页面重新加载时重置。您可以做的是，您可以使用 Cookies 或 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 Output .