通过 API 获取所有数据后，如何保留通过 jQuery 添加的类？

Question

基本上，我想做的是根据单击的选项卡在导航链接中保留“活动”类。但是，问题在于，由于我从 API（使用节点）获取数据，它会刷新页面并恢复到其原始状态。我一直在研究，找不到答案。请帮忙。

以下是正在发生的事情： https://streamable.com/o1edue

这是我的 HTML/EJS 代码：

<ul class="nav nav-tabs">
  <li class="nav-item test">
    <a
      class="nav-link active"
      id="summer"
      aria-current="page"
      href="/season/2020/summer"
      >Summer</a
    >
  </li>
  <li class="nav-item test">
    <a class="nav-link" id="spring" href="/season/2020/spring">Spring</a>
  </li>
  <li class="nav-item test">
    <a class="nav-link" id="fall" href="/season/2020/fall">Fall</a>
  </li>
  <li class="nav-item test">
    <a class="nav-link" id="winter" href="/season/2020/winter">Winter</a>
  </li>
</ul>

<% for(let i = 0; i< animeSeason.anime.length; i++){ %>
<div class="row test">
  <div class="col-lg-3 col-md-6">
    <div class="card bg-dark text-white card-home">
      <a href="/season/<%= animeSeason.anime[i].title %>">
        <img
          src="<%= animeSeason.anime[i].image_url %>"
          class="card-img"
          alt="..."
        />
        <div class="card-img-overlay">
          <h5 class="card-title card-title-home">
            <%= animeSeason.anime[i].title %>
          </h5>
        </div>
      </a>
    </div>
  </div>
</div>

<% } %>

这是我的 jQuery 代码：

$(".test .nav-link").click(function () {
    $(".test .nav-link").removeClass("active");
    $(this).addClass("active");
});

Answer 1

这是一个客户端javascript（整个页面刷新时）你可以在页面加载时使用.indexOf

$(() => {
  $('a.nav-link').filter((index , element) => {
    return window.location.href.indexOf($(element).attr('href')) > -1;
  }).addClass('active');
});

这就是它的工作原理

var url = "https://mywebsite.com/facebook/anything";  // just for demo don't use it in your code // if you change facebook here with google or twitter it should active its `<a>`


$(() => {  //on document ready
  $('a.nav-link').filter((index , element) => {
    var The_href = $(element).attr('href');
    return url.indexOf(The_href) > -1;  // replace url with window.location.href
  }).addClass('active');
})

.nav-link{
  background : #eee;
  margin : 5px;
  padding : 5px;
}
.nav-link.active{
  background : red;
  color : #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="nav-link" href="/google/anything">Google</a>
<a class="nav-link" href="/facebook/anything">facebook</a>
<a class="nav-link" href="/twitter/anything">twitter</a>