Question

我有以下HTML代码

<ul class='selectul'>
    <li class='active'><a href='?sortby=views'>by Popularity.</a></li>
    <li><a href='?sortby=recency'>by Recency.</a></li>
    <li><a href='?sortby=alphabet'>Alphabetically.</a></li>
</ul>

点击任何<li>元素后，我想向其添加class='active'。然后，它的兄弟姐妹都不允许这个班级。我尝试使用以下jQuery代码

执行此操作

(function(){
    $('.selectul li').on('click',function(){
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
    });
}())

但它似乎没有做任何事情。我刚刚开始使用jQuery，所以如果这个问题非常基本，我会道歉。

Answer 1

脚本没问题。问题出在其他地方。单击该链接后，文档将重新加载，您不会注意到类的更改。

尝试：

(function(){
  $('.selectul li').on('click',function(){
    $(this).addClass('active');
    $(this).siblings().removeClass('active');
    return false;
  });
}());

return false 会中断Click-Event并阻止重新加载文档。

Answer 2

您的代码看起来不错，我已经验证它正在运行@ jsfiddle.net

http://jsfiddle.net/kEfyT/1/

$(document).ready(function(){
    $('.selectul li').on('click',function(){
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
    });
});

Answer 3

尝试等待文档就绪事件，因为元素可能尚未在页面上。

$(function(){
    $('.selectul li').on('click',function(){
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
    });
});

Answer 4

我认为你应该像这样编码

http://jsfiddle.net/3WBvL/2/

$(document).ready(function(){
    $('.selectul li').on('click',function(){

        $(this).addClass('active');
        $(this).siblings().removeClass('active');
    });
});

jQuery addClass不会向元素添加类

4 个答案: