如何將CSS類添加到一組鏈接中的特定鏈接？

Question

我有5個鏈接，我想添加active類到特定的鏈接。

例如

<div class="w3-sidebar w3-bar-block w3-collapse w3-card-2 w3-animate-left" style="width: 200px; padding-top: 50px;" id="mySidebar"> 
    <button type="button" class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close &times;</button> 
    <a href="#" class="w3-bar-item w3-button">Create User</a> 
    <a href="#" class="w3-bar-item w3-button">Security</a> 
    <a href="#" class="w3-bar-item w3-button">Link 3</a> 
    <a href="#" class="w3-bar-item w3-button">Link 4</a> 
    <a href="#" class="w3-bar-item w3-button">Link 5</a> 
</div> 

如果我想active類添加到第二個鏈接（安全性）。我如何添加。

$(document).ready(function() { 

    //ADD Active in SideNav bar 
    $('.w3-sidebar a').click(function (e) { 
     e.preventDefault(); 
     $('.w3-sidebar a').removeClass('active'); 
     $(this).addClass('active'); 
    }) 
}); 

我試圖上面的代碼。但問題是。當頁面重新加載。該活動沒有出現。

Answer 1

你必須選擇與你的jQuery的第二個元素，每一次應用active類在頁面加載。

$(document).ready(function() { 
 
    $(".w3-button:eq(2)").addClass("active"); 
 
    $('.w3-sidebar a').click(function(e) { 
 
    e.preventDefault(); 
 
    $('.w3-sidebar a').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    }); 
 
});

.active { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="w3-sidebar w3-bar-block w3-collapse w3-card-2 w3-animate-left" style="width: 200px; padding-top: 50px;" id="mySidebar"> 
 
    <button type="button" class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close &times;</button> 
 
    <a href="#" class="w3-bar-item w3-button">Create User</a> 
 
    <a href="#" class="w3-bar-item w3-button">Security</a> 
 
    <a href="#" class="w3-bar-item w3-button">Link 3</a> 
 
    <a href="#" class="w3-bar-item w3-button">Link 4</a> 
 
    <a href="#" class="w3-bar-item w3-button">Link 5</a> 
 
</div>

Answer 2

你必須寫下面的代碼

$('.w3-sidebar a:nth-child(2)').addClass('active') 

退房的jsfiddle

https://jsfiddle.net/9sncqbb9/

Answer 3

有幾個方法來做到這一點。如果您對當前頁面的信息只是這樣做：在你的JS代碼

<div class="w3-sidebar w3-bar-block w3-collapse w3-card-2 w3-animate-left" style="width: 200px; padding-top: 50px;" id="mySidebar"> 
    <button type="button" class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close &times;</button> 
    <a href="createUser" class="w3-bar-item w3-button">Create User</a> 
    <a href="security" class="w3-bar-item w3-button">Security</a> 
    <a href="#" class="w3-bar-item w3-button">Link 3</a> 
    <a href="#" class="w3-bar-item w3-button">Link 4</a> 
    <a href="#" class="w3-bar-item w3-button">Link 5</a> 
</div> 

然後：

//currentPageName = 'security'; 
$('a[href="'+currentPageName+'"]).addClass('active');