问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

jquery的一个问题

头像
muzi1102
    51675777
    <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>就没有问题？这是为什么？求助，谢谢

    jqueryjavascript
    阅读 3.2k
    4 个回答
    得票最新
    头像
    _我已经从中二毕业了
      7.9k82131
      ✓ 已被采纳

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

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

      头像
      杨佰
        2.8k41223
        <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>
        头像
        cayleyws
          1313

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

          • 形式出现的，你的书写格式不太正规，第二次，你若是想实现这个功能，你的选择器应该这样写 $('li')，因为li标签有其他兄弟节点，其实你的问题是，选择器书写不规范
          头像
          AlexWang
            2
            新手上路，请多包涵
            .active a{
  color:red;
  display:inline-block;
}

            $('li').click(function(event) {      
    $(this).addClass('active').siblings().removeClass('active');
});
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题