Javascript toggleClass在新页面加载时删除

我让我的链接看起来像标签，这真的是一个过滤器。以下是有关部分：

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

因此，当我在进入新页面的“选项卡”上“单击”时，所发生的情况是，应用了新的活动，旧的活动不会被删除，而重新加载时，原始的评论应用了活动，而不是赎回。我怎样才能解决这个问题

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

---

这是一个jsbin:

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

$（函数（）{
$（“div”）。单击（函数（）{
$（this.toggleClass（“on”）；
localStorage.setItem（“state”（$（“div”）.hasClass（“on”）？“on”：“off”）；
console.log（“本地存储设置为：”+（$（“div”）.hasClass（“开”）？“开”：“关”）；
});
if（！！localStorage.getItem（“state”）和&localStorage.getItem（“state”）=“on”）
$（“div”）.addClass（“on”）；
else if（！！localStorage.getItem（“state”）和&localStorage.getItem（“state”）！=“on”）
$（“div”）.removeClass（“on”）；
});
.n{display:inline；}
N
.on.f{显示：无；}

单击以切换

在…上
关

而不是

$（'.nav link tab'）。removeClass（'active'）尝试
$（'.active'）.removeClass（'active'）是的，我实际上也这么做了，它确实删除了旧的点击，但在页面加载时，它会回到活动状态。不过我有一个想法。@JosephChambers类似的东西？谢谢，你的例子让我受益匪浅，我正在努力让它发挥作用。@JosephChambers如果你需要帮助，请告诉我。我很乐意帮忙。请别忘了接受我的回答<代码>:D
@JosephChambers让我们一起努力吧。JSBin输出有效吗？您的代码几乎有效。在新页面加载时，第一个活动页面不会被删除。当我点击其他标签时，它会被删除，但在新页面上，它会回来谢谢！你真棒。我正在将此保存为代码段：）
$(document).ready(function () {

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

});