Javascript 如何更改元素'；什么课要开课？

我在EJS中使用一个侧导航栏的引导模板作为一个部分，然后在所有使用它的页面上都包含它。是从他们家里拿走的。HTML是

<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
  <ul class="nav nav-pills flex-column">
    <li class="nav-item">
      <a class="nav-link active" href="/profile">Overview</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/accountdetails">Account Details</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/admin">Admin</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/transactions">Transactions</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/contract">Contract</a>
    </li>
  </ul>
</nav>

无论哪个链接有

活动类

都有特定的样式，背景为深蓝色。现在，当导航到不同的链接时，我想通过编程更改此设置

它们都会转到不同的页面，所以我可以在那里进行更改。问题是，我将整个边栏代码作为EJS部分包含在内，这样就不起作用了。我也试过了，但没用（激活的样式会闪烁，但会消失——可能是因为它正在路由到另一个页面？）

---

这里有很多关于以编程方式更改HTML元素的问题，但它们通常使用

document.getElementById

，这似乎太多工作了（给每个元素一个ID，全部检查，等等）。有没有更快/正确的方法可以做到这一点？

您可以执行以下操作：

• 在

  .nav项

  上设置单击事件，以添加

  .active

  类
• 从任何其他同级元素中删除

  .active

  类

$（'.nav item'）。在（'click'，function（）上{
$（this）.addClass（'active'）。同胞（'li'）。removeClass（'active'）；
});













您可以执行以下操作：


在
.nav项
上设置单击事件，以添加
.active
类
从任何其他同级元素中删除
.active
类


$（'.nav item'）。在（'click'，function（）上{
$（this）.addClass（'active'）。同胞（'li'）。removeClass（'active'）；
});













这是一个帮助您的代码















$（函数（）{
$（“.nav项”）。单击（函数（）{
$（“.nav项”）。每个（函数（）{
$（this.find（“a”）.removeClass（“active”）；
});
$（this.find（“a”）.addClass（“active”）；
});
});
这是一个帮助您的代码















$（函数（）{
$（“.nav项”）。单击（函数（）{
$（“.nav项”）。每个（函数（）{
$（this.find（“a”）.removeClass（“active”）；
});
$（this.find（“a”）.addClass（“active”）；
});
});
如果您使用EJS，您可能可以执行以下操作

<a class="nav-link<% if (page_name === 'profile') { %> active<% } %>" href="/profile">Overview</a>



这是未经测试的，但应该让你走上正确的道路。只需使用EJS语法执行一个if语句，检查您是否在正确的页面上，并添加单词active。
如果您使用EJS，您可能可以执行以下操作

<a class="nav-link<% if (page_name === 'profile') { %> active<% } %>" href="/profile">Overview</a>



这是未经测试的，但应该让你走上正确的道路。只需使用EJS的语法执行一个if语句，检查您是否在正确的页面上，并添加单词active。
一些回答的人有点困惑，认为您停留在同一页面上，并更改了
标记的类别。但我认为，您在这些页面上的单击将导航到新页面，并且您希望在页面加载时，相应的
类将处于活动状态

这可能有助于：

<script>
    var path = location.pathname; // ex: '/profile';
    var activeItem = document.querySelector("a[href='" + path + "']");
    activeItem.class += ' active';
</script>

有些人回答时有点困惑，认为您停留在同一页面上，并且更改了
标记的类别。但我认为，您在这些页面上的单击将导航到新页面，并且您希望在页面加载时，相应的
类将处于活动状态

这可能有助于：

<script>
    var path = location.pathname; // ex: '/profile';
    var activeItem = document.querySelector("a[href='" + path + "']");
    activeItem.class += ' active';
</script>

这可能是第一次有人问这个问题。我现在想在导航到不同的链接时通过编程更改它。你想如何更改它？@JeremyThille新手在发帖之前从不尝试寻找旧答案。我也经常这么做；-）@JasonKrs我想我可以给每个人一个ID，然后检查ID是否与页面名称匹配，但是（1）我必须给他们所有人一个ID，并且（2）必须在每个不同的页面中包含一个脚本，以便进行检查。似乎需要做很多工作，对于我认为常用的东西，我只是认为应该有一个更简单的方法。可能的重复不会是第一次有人问这个问题。我现在想在导航到不同的链接时以编程的方式更改它`