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

【问题标题】：How to change element's class to active?如何将元素的类更改为活动的？
【发布时间】：2017-08-11 14:51:30
【问题描述】：

我在 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，检查所有内容等）。有更快/正确的方法吗？

【问题讨论】：

How to getElementByClass instead of GetElementById with Javascript?的可能重复
这不是第一次有人问这个问题了。
`我现在想在导航到不同的链接时以编程方式更改它`你想如何更改它？
@JeremyThille 新人在发帖前从不尝试寻找旧答案。我也经常这样做;-)
@JasonKrs 我想我可以给每个人一个 ID，然后检查 ID 是否与页面名称匹配，但是（1）我必须为此给他们一个 ID，并且（2）会必须在每个不同的页面中包含一个脚本来进行检查。看起来工作量很大，对于我认为常用的东西，只是认为应该有一个更简单的方法。

标签： javascript html twitter-bootstrap dom

【解决方案1】：

您可以执行以下操作：

在.nav-item上设置点击事件，添加.active类。
从任何其他同级元素中删除 .active 类。

$('.nav-item').on('click', function() {
  $(this).addClass('active').siblings('li').removeClass('active');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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 active">
      <a class="nav-link" href="#">Overview</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Account Details</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Admin</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Transactions</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contract</a>
    </li>
  </ul>
</nav>

【讨论】：

答案很棒，但请解释一下你做了什么以及为未来的访问者编写代码的目的。
感谢卡姆兰的观察，希望现在更清楚一点。

【解决方案2】：

有些回答的人有点糊涂，认为你停留在同一个页面上，并改变你的<a>标签的类。但我认为您对这些的点击会导航到新页面，并且您希望相应的<a> 在页面加载时具有active 类。

这可能会有所帮助：

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

当然，使用 jquery 会更容易：

$(function() {
    var path = location.pathname;
    $("a[href='" + path + "']").addClass('active');
})

【讨论】：

【解决方案3】：

这是帮助您的代码。

<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="#">Overview</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Account Details</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Admin</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Transactions</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contract</a>
            </li>
        </ul>
    </nav>


    <script type="text/javascript">
        $(function () {
            $(".nav-item").click(function () {
                $(".nav-item").each(function () {
                    $(this).find("a").removeClass("active");
                });
                $(this).find("a").addClass("active");
            });
        });
    </script>

【讨论】：

【解决方案4】：

如果您使用 EJS，您可能可以执行以下操作

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

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

【讨论】：