老师 请问bug从何而来
来源：2-5 编程练习
一路向蓝
2019-05-13 12:25:54
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul {
cursor: pointer;
}
.yellow {
background: yellow;
}
.blue {
background: blue;
}
.red {
background: red;
}
</style>
</head>
<body>
<ul id="menu">
<li>Web前端攻城狮</li>
<li>前端小白入门</li>
<li>前端进阶：响应式开发与常用框架</li>
<li>HTML5与CSS3实现动态网页</li>
<li>HTML5&CSS3进阶与常用框架</li>
<li>JavaScript基础入门</li>
<li>进击JavaScript核心</li>
</ul>
<script src="https://cdn.bootcss.com/zepto/1.1.7/zepto.min.js"></script>
<script>
/*此处写代码*/
$("#menu li").on("click",function(ev){
$(this).addClass("yellow").siblings().removeClass();
$(this).next().addClass("red");
$(this).prev().addClass("blue");
})
</script>
</body>
</html>
点准了好像没错
但是如果 点行与行中间 （多试几次） 就会出现BUG 两个蓝色 或者红色背景 why？
2回答
-
同学你好， 因为当点击一个已经有背景颜色的li的时候， 只会清除它兄弟元素的类名， 不会清除他自身已经有的class类名。 所以会出现同学说的这种情况。
建议修改： 可以在设置类名之前， 清除当前点击的类名， 示例：
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0 -
一路向蓝
提问者
2019-05-13
找到了 点击的时候 没点准 会给点击的元素也添加上 blue 或者 red 类名
但是这又是为什么？？
0
相似问题