如何在一组链接中的特定链接中添加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

您必须编写以下代码

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

签出jsfiddle

https://jsfiddle.net/9sncqbb9/

Answer 2

您必须在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 3

做到这一点的方法很少。 如果您有关于当前页面的信息，请执行以下操作：

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

然后在您的JS代码中：

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