jquery - jQuery addClass 不向元素添加类

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