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');
  });

});

所以，当我点击＆＃39;在＆＃39;选项卡上＆＃39;进入一个新的页面，会发生的情况是新的活动被应用，旧的活动被删除，而不是当它重新加载原始评论已经应用了活动而不是被赎回。我该如何解决这个问题？

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

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

Answer 1

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

promise

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

上面的代码片段是沙箱。请查看JSBin Output。

toggleClass在新页面加载时删除

1 个答案: