如何將元素的類更改為活動的？

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。