使用jQuery添加/删除ul列表的活动类？

Question

我试图在每次单击列表项时删除和设置活动类。它当前正在删除所选活动类，但没有设置它。你有什么想法我漏掉了什么吗？

HTML

<ul class="nav nav-list">
  <li class='nav-header'>Test</li>
  <li class="active"><a href="page1.php">Page 1</a></li>
  <li><a href="page2.php">Page 2</a></li>
  <li><a href="page3.php">Page 3</li>
</ul>

jQuery：

 $('.nav-list').click(function() {

    //console.log("Clicked");
    $('.nav-list li.active').removeClass('active');
    $(this).addClass('active');
});

- Paul

---

只是一个想法，可能是因为你将活动类添加到了实际的列表上，而不是列表内的列表对象上吗？你从.nav-list li中移除，但是添加到.nav-list。 - Chikilah

如果你记录 $(this)，你会发现你的事件是指整个列表。你必须引用列表元素 $('.nav-list li') 或者最好使用 @minitech 下面描述的事件委托。 - ho.s

Answer 1

this将指向由.nav-list选择的<ul>。 您可以改用委托！

$('.nav-list').on('click', 'li', function() {
    $('.nav-list li.active').removeClass('active');
    $(this).addClass('active');
});

- Ry-

Answer 2

你可以使用 siblings 和 removeClass 方法。

$('.nav-link li').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
});

- Naitik Shah

---

我知道这已经快一年了，但是这个解决方案对我很有效！ - This Guy

Answer 3

请试一下以下方法，

 $('.nav-list li').click(function() {

    $('.nav-list li.active').removeClass('active');
    $(this).addClass('active');
});

在您的上下文中，$(this)将指向UL元素而不是Li。因此，您没有得到预期的结果。

- Rajaprabhu Aravindasamy

---

@Paul 很高兴能帮助。 - Rajaprabhu Aravindasamy

Answer 4

我使用了这个：

$('.nav-list li.active').removeClass('active');
$(this).parent().addClass('active');

由于活动类在<li>元素中，而被点击的是<a>元素，第一行代码将从所有<li>中删除.active，第二行代码（同样，$(this)代表被点击的<a>元素）将.active添加到直接父元素，即<li>。

- J.D Ramirez

Answer 5

在我的情况下，我有一个具有相同类的div元素。现在我使用jquery在它上面添加了active类，请查看代码。

<div class="previewBox" id="first_div">
 ...
</div>

<div class="previewBox" id="second_div">
 ...
</div>

<div class="previewBox" id="third_div">
 ...
</div>

jQuery 代码

$(".previewBox").click(function () {
   $(".previewBox.active").removeClass('active')
   $(this).addClass('active')
});

css

.active {
  background-color:#e9f1f5;
  border-left:4px solid #024a81;
}

演示 点击这里

- Neeraj Tangariya

Answer 6

$(document).ready(function(){
    $('.cliked').click(function() {
        $(".cliked").removeClass("liactive");
        $(this).addClass("liactive");
    });
});

.liactive {
    background: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul
  className="sidebar-nav position-fixed "
  style="height:450px;overflow:scroll"
>
    <li>
        <a className="cliked liactive" href="#">
            check Kyc Status
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            My Investments
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            My SIP
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            My Tax Savers Fund
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            Transaction History
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            Invest Now
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            My Profile
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            FAQ`s
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            Suggestion Portfolio
        </a>
    </li>
    <li>
        <a className="cliked" href="#">
            Bluk Lumpsum / Bulk SIP
        </a>
    </li>
</ul>;

- Ankit Jain