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

我使用侧导航栏的引导模板作为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，检查所有等）。有没有更快/更正确的方法？

来源

2017-08-11 mcansado

的可能的复制[如何getElementByClass代替的getElementById使用Javascript？]（https：//开头计算器.com/questions/1933602/how-to-getelementbyclass-instead-of-getelementbyid-with-javascript） – kulaeff

这不可能是第一次有人问这个问题。 –

'我现在想在导航到不同的链接时改变这个编程方式'你想如何改变它？ –

有些人回答有点困惑，认为你留在同一页面，并改变你的<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'); 
})

来源

2017-08-11 15:25:03 arbuthnott

你可以做到以下几点：

坐落在.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>

来源

2017-08-11 15:00:44 Syden

答案是真棒，但请解释你为未来的访问者做了什么和代码的目的。 –

感谢Kamran的观察，希望现在更清楚一点。 – Syden

是的，Upvoted。 :) –

这是帮助您的验证码。

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

来源

2017-08-11 15:06:50

如果您使用EJS你也许可以这样做以下

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

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

来源

2017-08-11 15:15:01

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

回答

相关问题