jQuery写选项卡

TI_]`CYKFZCWYP(ZC5E4((B.png

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.1.js"></script>
<title>选项卡</title>
<style>
body {
margin: 0;
padding: 0;
}
h1 {
width: 600px;
height: 50px;
margin: 0 auto;
text-align: center;
}
.top {
width: 600px;
height: 500px;
background-color: gray;
margin: 0 auto;
}
.top_u {
width: 560px;
height: 50px;
background-color: red;

}
.top_u li {
display: inline-block;
width: 150px;
line-height: 50px;
text-align: center;
}
.top_u li:hover {
cursor: pointer;
}

.hide{
display: none;
}

.current {
background-color: greenyellow;
color: black;
}
</style>
</head>
<body>
<h1>高清视频区</h1>
<div class="top">
<ul class="top_u">
<li index="c1" class="current" onclick="tab(this);">最新电影</li>
<li index="c2" onclick="tab(this);">最新综艺</li>
<li index="c3" onclick="tab(this);">最新电视剧</li>
</ul>
<div class="content">
<div id="c1" style="margin-left: 20px">
<img src="images/1.jpg" alt="" width="280">
<img src="images/2.jpg" alt="" width="280">
<img src="images/3.jpg" alt="" width="280">
<img src="images/4.jpg" alt="" width="280" height="190">
</div>
<div id="c2" class="hide" style="margin-left: 20px">
<img src="images/5.jpg" alt="" width="280">
<img src="images/6.jpg" alt="" width="280">
<img src="images/7.jpg" alt="" width="280">
<img src="images/8.jpg" alt="" width="280">
</div>
<div id="c3" class="hide" style="margin-left: 20px">
<img src="images/9.jpg" alt="" width="280">
<img src="images/10.jpg" alt="" width="280">
<img src="images/11.jpg" alt="" width="280">
<img src="images/12.jpg" alt="" width="280">
</div>
</div>
</div>
<script>
function tab(self) {
$(self)
.addClass("current") //将当前选项卡高亮
.siblings() //将其它非当前选项卡的高亮样式取消,先选择当前的兄弟节点
.removeClass("current"); //再取消高亮样式
var box = "#" + $(self).attr("index"); //获取当前的自定义索引属性,获取当前点击的是哪一个
$(box)
.removeClass("hide") //去掉它的隐藏样式,将对应的内容盒子显示出来
.siblings() //再将其它兄弟盒子内容隐藏,首先先获取其它兄弟节点
.addClass("hide"); //给这些兄弟节点添加隐藏样式
}
</script>
</body>
</html>

导航部位必须跟下面的内容放在同一个div下面

相关文章