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

Question

我在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>

无论哪个链接具有active类，都必须具有特殊的样式，并在背景中使用深蓝色。 我现在想在导航到其他链接时以编程方式更改此设置。

他们都将转到不同的页面，所以我可以在那里更改，问题是我将整个侧边栏代码作为EJS部分包括在内，因此无法正常工作。 我也尝试了这个答案，但是没有用（闪烁活动样式但消失了-可能是因为它正在路由到另一个页面？）。

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

Answer 1

您可以执行以下操作：

• 在.nav-item上设置click事件，以添加.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> 

Answer 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');
})

Answer 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> 

Answer 4

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

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

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