javascript - jquery的一个问题-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

javascript - jquery的一个问题

大家讲道理 2017-04-10 15:25:14

[JavaScript讨论组]

556

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

大家讲道理

光阴似箭催人老，日月如移越少年。

全部回复(4)

伊谢尔伦2017-04-10 15:27:14 4楼

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

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

赞 +0

添加回复

伊谢尔伦2017-04-10 15:27:14 3楼

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

赞 +0

添加回复

天蓬老师2017-04-10 15:27:14 2楼

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

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

赞 +0

添加回复

巴扎黑2017-04-10 15:27:14 1楼

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

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>