请问下导航栏按钮之间的切换用jquery咋实现的
比如我点击免费课程，它的颜色就加深，其他的颜色就恢复正常，相反，我点击职业路径，职业路径颜色加深，免费课程的颜色就变浅
正在回答
帮你写了一个小demo，供参考
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
list-style: none;
}
ul{
width:500px;
height:100px;
background: #ccc;
}
li{
float: left;
padding: 0 20px;
line-height: 100px;
}
.active{
color:red;
}
</style>
</head>
<body>
<ul>
<li class="active">免费课程</li>
<li>职业路径</li>
<li>实战</li>
</ul>
</body>
<script type="text/javascript" src="./jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$("li").each(function(index,item){
$(item).click(function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");
})
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
list-style: none;
}
ul{
width:500px;
height:100px;
background: #ccc;
}
li{
float: left;
padding: 0 20px;
line-height: 100px;
}
.active{
color:red;
}
</style>
</head>
<body>
<ul>
<span><li class="active">免费课程</li></span>
<span><li>职业路径</li></span>
<span><li>实战</li></span>
</ul>
</body>
<script type="text/javascript" src="./jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$("li").each(function(index,item){
$(item).click(function(){
$(this).addClass("active");
$(this).parent().siblings().children().removeClass("active");
})
})
</script>
</html>
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星