JQuery实现选项卡

最新推荐文章于 2021-06-03 20:33:25 发布

weixin_41213367

最新推荐文章于 2021-06-03 20:33:25 发布

阅读量191

点赞数

本文链接：https://blog.csdn.net/weixin_41213367/article/details/79240569

版权

<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#ulList{
margin: 0;
padding: 0;
}
#ulList li{
float: left;
width: 98px;
text-align: center;
color: white;
list-style: none;
border: 1px solid #2B88FF;
background-color: #009933;
}
#tabcontent{
width: 300px;
height: 100px;
background-color: lightgoldenrodyellow;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
<script>
$(document).ready(function() {
var divarr = $('#tabcontent').children(); //获取
divarr.css("display", "none");
$("#ulList li").click(function() {
divarr.removeClass("active"); //删除所有的class
var count = $(this).index(); //获取li的索引
divarr.eq(count).addClass("active").siblings().css("display", "none"); //给相应的div添加class，并让兄弟节点隐藏
$('.active').css("display","block"); //显示隐藏div
})
})
</script>
</head>

<body>
<div>
<div class="header">
<h2>选项卡</h2></div>
<div class="tab">
<ul id="ulList">
<li id="lia">选项卡1</li>
<li id="lib">选项卡2</li>
<li id="lic">选项卡3</li>
</ul>
</div>
<div style="clear:both;"></div>
<div id="tabcontent">
<div id="c1" class="active">
<div>选项卡内容1</div>
</div>
<div id="c2">
<div>选项卡内容2</div>
</div>
<div id="c3">
<div>选项卡内容3</div>
</div>
</div>
</div>
</body>