如何将css类添加到一组链接中的特定链接？答案

【问题标题】：How to add css class to particular link in a group of links?如何将css类添加到一组链接中的特定链接？
【发布时间】：2017-08-15 21:19:00
【问题描述】：

我有 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');
    })
});

我尝试了上面的代码。但问题是。当页面重新加载时。该活动没有出现。

【问题讨论】：

如果你想在页面重新加载后出现这个类，你必须将此信息保存在某个地方..在本地存储中，在 cookie 中，在 url 中。
@Dominikkrzywiecki 不需要。我得到了它。 $('#linkCreateUser').addClass('active'); 如果我一开始就加载它，这个类就会有活动的。它奏效了。我不明白为什么人们会消极。他们应该说出原因。

标签： javascript jquery html css asp.net

【解决方案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>

【讨论】：

【解决方案2】：

你必须写下面的代码

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

查看 jsfiddle

https://jsfiddle.net/9sncqbb9/

【讨论】：

【解决方案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');

【讨论】：