jquery each()选项卡

最新推荐文章于 2023-03-06 15:12:56 发布

前端老周头

最新推荐文章于 2023-03-06 15:12:56 发布

阅读量414

点赞数

分类专栏： jquery 文章标签： jquery each

本文链接：https://blog.csdn.net/Jouen521/article/details/79226570

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery选项卡</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
ul{
margin:0;
padding:0;
list-style: none;
}
ul li{
float:left;
width:80px;
height:40px;
background: #eee;
font-family: "微软雅黑";
text-align: center;
line-height: 40px;
border:3px solid #f0f;
}
#bottom{
clear:left;
width:430px;
height:300px;
background: #333;
}
#bottom div{
display: none;
}
#bottom .bottom-show{ /*不写#bottom会该样式不会执行*/
display: block;
font-family: "微软雅黑";
font-size: 20px;
color:#f0f;
}
.title-show{
border:3px solid #333;
}
</style>
</head>
<body>
<div>
<ul id="title">
<li class="title-show">汽车</li>
<li>头条</li>
<li>八卦</li>
<li>娱乐</li>
<li>体育</li>
</ul>
<div id="bottom">
<div class="bottom-show">汽车</div>
<div>头条</div>
<div>八卦</div>
<div>娱乐</div>
<div>体育</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
$("li").each(function(index){
$(this).mouseover(function(){
$(this).addClass("title-show").siblings().removeClass("title-show");
$("#bottom>div:eq("+index+")").addClass("bottom-show").siblings().removeClass("bottom-show");
})
})
})
</script>

</html>

希望能对需要的人有所帮助