Html 使用动态活动导航选项卡将导航栏导入或包含到不同的文件页中

我只是想问一下，是否有一种方法可以将我的导航栏存储在一个文件页面中，并根据用户单击的内容动态更改其活动状态

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

---

与此代码一样，它将存储在一个页面中。但是，如果单击功能，则主页不应处于活动状态，并且功能应为活动项。因为我正在将相同的导航栏复制到每个页面中，而更改其活动状态取决于文件页面。如果可能的话，我想这样做是为了避免冗余。谢谢。

您可以使用Javascript按类从导航栏中收集所有

元素，在这种情况下，您的

导航链接

类就可以了。有了这些链接的集合，我们就可以对它们进行迭代，查看哪个目标href与用户所在的当前页面相匹配，并在其末尾添加文本

您可以将以下代码块放在结束正文标记之前

$（文档）.ready（函数（）{
让allLinks=$（“.nav link”）.map（函数（）{
返回此；//获取具有.nav链接类的所有元素，并将它们添加到列表中。
}).get（）；
//遍历我们获取的每个链接。
$.each（所有链接、函数（键、值）{
如果（value.href==document.URL）{//如果此链接的href属性与当前页面URL匹配。
$（this.html（value.innerText+“（current）”）；//调整元素的html并在末尾附加后缀，或者根据需要在此处执行任何其他操作。
}
});
});

我认为使用原始HTML无法实现这一点，您需要使用PHP/JS来获取用户所在的当前页面，并在此基础上，调整类以包含您需要的其他属性。@Skuly您好，我如何通过JS搜索来实现这一点？我真的不知道关键词是什么，至少得到了与我的问题相似的结果。谢谢。如果href与路径匹配，请使用window.location.pathname获取当前页面并添加类。@AbhishekSarwan因此基本上逻辑应该是这样的：如果类被单击，那么我应该触发window.location.pathname？这可以通过JavaScript实现，对吗？如果我错了，请纠正我，谢谢。基本上是的，您只需查看当前文档URL，并根据需要调整HTML元素以添加您的“（当前）”后缀即可。看看我的答案，这是如何做到的。谢谢你的帮助！