Question

我正在使用侧导航栏的引导模板作为EJS中的部分模板，然后将其包含在使用它的所有页面中。是从他们的Dashboard template中取出的。 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>

active类中的任何一个链接都具有背景中深蓝色的特定样式。我现在想要在导航到不同的链接时以编程方式更改它。

他们都会转到不同的页面，所以我可以改变那里的问题是我将整个侧边栏代码包含为EJS部分，这样就行不通了。我也尝试了这个answer但它没有用（闪烁活动样式但消失了 - 可能是因为它正在路由到另一个页面？）。

这里有很多关于以编程方式更改HTML元素的问题，但它们通常使用document.getElementById，这似乎太多了（给每个ID，检查所有等）。有没有更快/更正确的方法呢？

Answer 1

如果你使用EJS，你可能会做类似以下的事情

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

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

如何将元素的类更改为活动？

1 个答案: