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

我使用側導航欄的引導模板作爲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

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

回答

相關問題