保持活性药丸刷新，Bootstrap 4

Question

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

<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 通过将“活动” class 放在第一个药丸中来指定初始活动选项卡。当它被点击时，bootstrap 处理将 class 关闭并将其添加到新药丸中。

您需要为单击 link 之一切换药丸时设置 onClick 函数。该功能应该设置一个 cookie 或使用本地存储来记录哪个药丸是最新的以获得“有效”class。

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

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

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

您需要有在页面 Load 上运行的功能，该功能会查找 cookie 或在本地存储中，然后将活动的 class 分配给指定的 tab/pill，或者如果没有设置则默认为任何值成立。因为脚本会分配那个 class，你想把它从 html 本身中拉出来。

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

保持活性药丸刷新，Bootstrap 4

Keep active pill on refresh, Bootstrap 4

html

javascript

web-site-project

nav-pills

bootstrap-4