HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
li{ vertical-align:bottom; list-style-type:none;}
.tab{
400px;
}
.tab_nav{
100%;
display: flex;
display: box;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
}
.tab_nav li{
position: relative;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align:center;
padding:10px 0;
border:1px solid #e8e8e8;
border-bottom:0;
font-size: 12px;
margin-left:5px;
border-radius: 4px 4px 0 0;
background: #fcfcfc;
cursor: pointer;
}
.tab_nav li:first-child{
margin-left:0px;
}
.tab_nav li:active ,.tab_nav li.row{
background: #fff;
}
.tab_cont{
100%;
border:1px solid #e8e8e8;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="tab" id="tab">
<ul class="tab_nav" id="tab_nav">
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
<div class="tab_cont" id="tab_cont">
<div class="tab_contLi" style="display:none;">1</div>
<div class="tab_contLi" style="display: none;">2</div>
<div class="tab_contLi" style="display: none;">3</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="tab.js"></script>
<script>
_myTab.openEvent({
tab_nav:"tab_nav",//tab头部标签的ID
tab_cont:"tab_cont",//tab切换时内容的ID
tab_row:"row",//选中状态tab的类名
/* tab_index:1,//设置默认显示第几个*/
tab_event:"click" //添加点击还是划入事件
})
</script>
tabJS事件的封装
(function(window,undefined){
var myTab=function(){};
myTab.prototype = {
openEvent:function(params){
this.opt=params;
this.tabdefault();
this.tabEvent();
},
tabdefault:function(){
var tab_navLi=document.getElementById(this.opt.tab_nav).getElementsByTagName("li");
var tab_contDiv=document.getElementById(this.opt.tab_cont).children;
if(this.opt.tab_index !== undefined && this.opt.tab_index !== " " ){
tab_navLi[this.opt.tab_index].className="row";
tab_contDiv[this.opt.tab_index].style.display="block";
}else{
tab_navLi[0].className="row";
tab_contDiv[0].style.display="block";
}
},
tabEvent:function(){
var tab_navLi=document.getElementById(this.opt.tab_nav).getElementsByTagName("li");
var tab_contDiv=document.getElementById(this.opt.tab_cont).children;
var tab_event=this.opt.tab_event;
for(var i=0;i<tab_navLi.length;i++){
//即时运行
(function(i){
tab_navLi[i].addEventListener(tab_event,function(){
var Zindex=i;
for(var j=0;j<tab_navLi.length;j++){
tab_navLi[j].className="";
tab_contDiv[j].style.display="none";
};
tab_navLi[Zindex].className="row";
tab_contDiv[Zindex].style.display="block";
});
})(i);
}
}
}
window.myTab=myTab;
})(window,undefined);
var _myTab= new myTab();