<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>tab</title>
</head>
<style>
body{
margin: 0;
padding: 0;
}
.main {
width: 600px;
height: 600px;
background-color: lightblue;
margin: 10px auto;
}
.menu {
border:1px solid #red;
width: 600px;
/*height: 40px;*/
}
.menu li {
width: 100px;
height: 40px;
line-height: 40px;
float: left;
list-style: none;
border: 1px solid white;
/*background-color: black;*/
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
text-align:center;
}
.main li:hover {
color:black;
background-color: green;
font-size: 1.2em;
}
.content {
width: 600px;
height: 560px;
background-color: lightgreen;
float: left;
}
#c1 {
width: 100%;
height: 500px;
background-color: antiquewhite;
float: left;
}
.current{
background-color: blue;
}
.hide {
display: none;
}
</style>
<body>
<div class="main">
<ul class="menu">
<li index="c1" onclick="tab(this)" class="current">国产新片</li>
<li index="c2" onclick="tab(this)" >综艺新片</li>
<li index="c3" onclick="tab(this)" >日韩新片</li>
</ul>
<div class="content">
<div id="c1" >
<ul>
<li>我是标题01</li>
<li>我是标题02</li>
<li>我是标题03</li>
<li>我是标题04</li>
<li>我是标题05</li>
</ul>
</div>
<div id="c2" class="hide">
<ul>
<li>我是最新的综艺新片01</li>
<li>我是最新的综艺新片02</li>
<li>我是最新的综艺新片03</li>
<li>我是最新的综艺新片04</li>
<li>我是最新的综艺新片05</li>
</ul>
</div>
<div id="c3" class="hide">
<ul>
<li>我是日韩新片01</li>
<li>我是日韩新片02</li>
<li>我是日韩新片03</li>
<li>我是日韩新片04</li>
<li>我是日韩新片05</li>
</ul>
</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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
