<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简版选项卡</title>
<style>
* { margin: 0; padding: 0 }
.tabWrap { width: 300px; height: 400px; margin: 50px auto; box-sizing: border-box; overflow: hidden; }
/*tab按钮*/
.tabNav { width: 300px; height: 50px; background: #e5e5e5; }
.tabNav .tab{ width: 100px; height: 50px; line-height: 50px; float: left; text-align: center; cursor: pointer; }
.active{ background: #00AEFF; }
/*tab内容*/
.tabCont{ width: 300px; height:350px; }
.tabCont .cont{ width: 300px; height: 350px; background: #929292; display: none; text-align: center; }
.tabCont .show{ display: block; }
</style>
</head>
<body>
<div class="tabWrap">
<div class="tabNav">
<div class="tab active">tab1</div>
<div class="tab">tab2</div>
<div class="tab">tab3</div>
</div>
<div class="tabCont">
<div class="cont show">tab1内容</div>
<div class="cont">tab2内容</div>
<div class="cont">tab3内容</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//调用
fn($(".tabNav"),$(".tabCont"),"click");
});
/*
*参数1:按钮层盒子 参数2:内容层盒子 参数3:指定触发事件
*/
function fn(tab,tabCont,event) {
var tabChild = tab.children();
tabCont.children().hide().eq(0).show();
tabChild.each(function (index) {
$(this).on(event,function () {
tabChild.removeClass("active").eq(index).addClass("active");
tabCont.children().hide().eq(index).show();
});
})
}
</script>
</html>
