收藏
<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
