<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tabCont{
width: 400px;
margin: 30px auto;
border: 1px solid #f00;
}
.tabCont ul{
list-style: none;
overflow: hidden;
background-color: #ccc;
margin: 0;
}
.tabCont li{
float: left;
margin-left: 50px;
border: 1px solid #f00;
display: inline-block;
width: 50px;
text-align: center;
}
.select{
background-color: #fff;
}
#divBody div{
clear: both;
display: none;
height: 300px;
}
</style>
</head>
<body>
<div id="tab" class="tabCont">
<ul>
<li >1</li>
<li class="select">2</li>
<li>3</li>
</ul>
<div id="divBody">
<div style="display: block;">1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</body>
</html>
<script>
function TabSwitch(tabId) {
this.tabs = document.getElementById(tabId);
this.lis = this.tabs.getElementsByTagName('li');
this.divBody = this.tabs.getElementsByTagName('div')[0];
this.divs = this.divBody.getElementsByTagName('div');
this.init();
};
TabSwitch.prototype.init = function(){
var that = this;
for (var i = 0; i < this.lis.length; i++) {
this.lis[i].index = i;
this.lis[i].onclick = function () {
that.showTab(this.index);
var t = this.index;
this.setFirstTab(t);
}
}
};
TabSwitch.prototype.setFirstTab = function(){
var currentIndex = 0;
for (var i = 0; i < this.lis.length; i++) {
var className = this.lis[i].className;
//检测字符串
if(className.indexOf("select") !== -1){
currentIndex = i;
break;
}
}
};
TabSwitch.prototype.showTab = function(index){
for(var i = 0;i < this.lis.length;i++){
this.lis[i].className = "";
this.divs[i].style.display = "none";
}
this.lis[index].className = "select";
this.divs[index].style.display = "block";
};
new TabSwitch("tab");
</script>
tabSwitch 选项卡
最新推荐文章于 2024-10-16 23:49:24 发布