一个比较简单的选项卡，利用jQuery实现
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单的选项卡</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.tab {
width: 20%;
height: 400px;
margin: 0 auto;
}
.tab-nav {
width: 100%;
height: 40px;
background: #00CC66;
}
.tab-box {
width: 100%;
height: 360px;
border: 1px solid #ccc;
/*background: #00FF00;*/
}
li {
list-style: none;
float: left;
width: 33%;
line-height: 40px;
text-align: center;
}
.on {
background: #8f5902;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-nav">
<ul>
<li class="on">音乐</li>
<li>电影</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab-box">
<div class=""><h2>音乐内容</h2></div>
<div class="hide"><h2>电影内容</h2></div>
<div class="hide"><h2>娱乐内容</h2></div>
</div>
</div>
<script>
$('li').click(function () {
$(this).addClass("on").siblings().removeClass("on");
var i=$(this).index();
$('.tab-box > div').eq(i).removeClass('hide').siblings().addClass('hide');
})
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
