jquery的一个问题

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .active{color: red;}
    </style>
    <script src="js/jquery-1.4.2.min.js"></script>
    <script>
       $(function(){
             $('li a').click(function(event) {
                $(this).addClass('active').siblings().removeClass('active');
            });
       })
    </script>
</head>
<body>
    <ul>
        <li><a class="active" href="#">aaa</a></li>
        <li><a href="#">aaa</a></li>
        <li><a href="#">aaa</a></li>
        <li><a href="#">aaa</a></li>
    </ul>
</body>
</html>

为什么我把.active放在 <li><a class="active" href="#">aaa</a></li>时，这个效果不是点击哪个，哪个字体颜色改变，而是点击一个字体就改变，同时点击过的兄弟节点字体变色。
但是，这么写 <li class="active"><a href="#">aaa</a></li>就没有问题？这是为什么？求助，谢谢

第一个你是先给$('li a')绑定事件的，然后你想做的是给点击的那个添加类名active，然后其余的去掉类名。好了，问题来了，你给绑定事件的元素有兄弟元素吗？显然没有吧就他自己><a class="active" href="#">aaa</a>。

第二个你说给li添加类名就没问题了，那是因为li他有兄弟元素啊，才能够删除兄弟元素的类名。

你的选择器书写上有问题，$(li a)就代表了，所有你书写的代码块内容，因为都是以

形式出现的，你的书写格式不太正规，第二次，你若是想实现这个功能，你的选择器应该这样写 $('li')，因为li标签有其他兄弟节点，其实你的问题是，选择器书写不规范

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .active{color: red;}
    </style>
    <script src="js/jquery-1.4.2.min.js"></script>
    <script>
       $(function(){
             $('li a').click(function(event) {
                $(this).addClass('active').parent().siblings().find('a').removeClass('active');
            });
       })
    </script>
</head>
<body>
    <ul>
        <li><a class="active" href="#">aaa</a></li>
        <li><a href="#">aaa</a></li>
        <li><a href="#">aaa</a></li>
        <li><a href="#">aaa</a></li>
    </ul>
</body>
</html>

.active a{
  color:red;
  display:inline-block;
}

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

【热门文章】