虽然好多框架都集成有现成Tab标签页切换的例子，但还是自己写一下吧！
效果图：
HTML显示
<!doctype html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>标题切换内容</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
<style>
*{margin: 0;padding: 0;}
li{ list-style: none;display: inline-block;}
.container{width: 60%;margin:auto;}
.tabs{display: flex;}
.tab{ flex: 1;height:30px;line-height:30px;font-size:16px;font-family: "微软雅黑";text-align: center; cursor: pointer;}
.content{width: 100%;height:200px;display: none;background-color: #d8d8d8;}
.show{display: block;}
.active{background-color: #bbb;color:#fff;}
</style>
</head>
<body>
<div class="container">
<ul class="tabs">
<li class="tab active">java</li>
<li class="tab">php</li>
<li class="tab">html</li>
</ul>
<ul class="contents">
<li class="content show">Java内容</li>
<li class="content">PHP内容</li>
<li class="content">HTML内容</li>
</ul>
</div>
</body>
<script>
$('.tabs .tab').click(function(){
$(this).addClass('active').siblings().removeClass('active');
let id = $(this).index();
$('.contents .content').eq(id).addClass('show').siblings().removeClass('show');
})
</script>
</html>还是挺简洁的吧
评论 (0)