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

Answer 1

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

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

Answer 2

你可以使用兄弟姐妹和 removeClass 方法

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

Answer 3

试试这个，

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

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

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

Answer 4

我用过这个：

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

由于活动类位于<li>元素中，而点击的内容是<a>元素，因此第一行会从所有.active和第二行中删除<li>（再次，$(this)代表<a>，这是点击的元素）将.active添加到直接父级，即<li>。

Answer 5

就我而言，我有相同类的 div 元素。现在我使用 jquery 在它上面添加了活动类检查代码。

div 元素

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

演示 click_this

Answer 6

javafx.scene.layout

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

.liactive {
    background: orange;
}

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

6 个答案: