如何在公共标题中指示活动导航项？

Question

我有一个标题，我计划使用在我的所有网页顶部。我想将它保存在一个单独的文件中(我习惯于使用php，但我对Bootstrap世界并不熟悉)；但是，我不确定如何动态地将active类分配给表示当前页面的nav-item。Bootstrap (4)是否有这类事情的烘焙解决方案？我一直在四处寻找，但还没有找到一个好的解决办法。提前感谢！

​

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">My Site</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Blog</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

​

Answer 1

引导包括一些jQuery，而不仅仅是CSS。但是，您始终可以在页面加载时运行一些JavaScript或jQuery，这将根据加载页面时读取元素来切换类。例如，您可以：

1)在每一页上都有一个标识符(例如。类名称在保存页名称/值的页上的元素中)。示例：

​

<h1 class="page-lookup">
 Home
</h1>

​

2)将函数中的jQuery设置为为类读取，并使用.val()获取元素的值。示例：

​

const activePage = $(".page-lookup").val()

​

3)在每个

• 在你的肚脐上唯一地识别它们。示例：

4)运行一个开关大小写，查找匹配的存储值(activePage)。在匹配的情况下，您可以运行jQuery来更新类，以包含触发引导程序格式化的“活动”语法。

示例：

开关(activePage) { case主页：$(‘#主页).attr(“类”，“导航项活动”)；中断；大小写：$(’#about-page).attr(“类”，"nav-item active")；中断；}