保持活跃的药丸刷新，Bootstrap 4

Question

我正在使用 Bootstrap 4 创建一个网站，对于我的导航栏，我正在为我的按钮使用药丸。我要解决的问题是，如果我在不同的选项卡上并刷新页面，它会跳回主页。对于那些使用标签而不是药片的人，我已经看到了许多解决方案。这是其他人通常为此类问题提供的我的代码的 sn-p：

<div class="collapse navbar-collapse" id="navbarResponsive">
  <ul class="nav nav-pills navbar-nav ml-auto" id="pills-tab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-education-tab" data-toggle="pill" href="#pills-education" role="tab" aria-controls="pills-education" aria-selected="false">Education</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-skills-tab" data-toggle="pill" href="#pills-skills" role="tab" aria-controls="pills-skills" aria-selected="false">Skills</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-activities-tab" data-toggle="pill" href="#pills-activities" role="tab" aria-controls="pills-activities" aria-selected="false">Activities</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-projects-tab" data-toggle="pill" href="#pills-projects" role="tab" aria-controls="pills-projects" aria-selected="false">Projects</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
    </li>
  </ul>
</div>

如果你们中的某个人能帮助解决这个问题，我们将不胜感激......提前致谢！

Answer 1

<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>

您的 html 通过将“活动”类放在第一个药丸中来指定初始活动选项卡。单击该按钮后，bootstrap 会处理关闭该类并将其添加到新药丸中。

当点击切换药丸的链接之一时，您需要设置 onClick 函数。该函数应该设置一个 cookie 或使用本地存储来记录哪个药丸是最晚获得“活动”类的。

<a class="nav-link" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true" onClick="return saveTabSelect(this);">Home</a>

这告诉链接点击调用函数来存储设置

function saveTabSelect(e) {
  localStorage.setItem("tagSelected", e.id);
  return true;
}

您需要具有在页面加载上运行的函数，该函数在查找 cookie 或本地存储中，然后将活动类分配给指定的选项卡/药丸，或者如果未找到任何设置，则默认为任何设置。由于脚本会分配该类，因此您希望将其从 html 本身中提取出来。

function retrieveSelected(){
  var curTag = localStorage.getItem("tagSelected");
  var element = document.getElementById(curTag);
  element.classList.add("active"); 
}