利用最基础的面向对象的思想，实现tab选项卡效果：
效果截图：
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向对象的tab选项卡实现</title>
<link rel="stylesheet" href="tab.css">
</head>
<body>
<div class="box" id="box">
<ul class="conList">
<li class="conli on">第一张选项卡</li>
<li class="conli">第二张选项卡</li>
<li class="conli">第三张选项卡</li>
</ul>
<nav class="btnList">
<a class="btn on" href="javascript:;">第一个控制按钮</a>
<a class="btn" href="javascript:;">第二个控制按钮</a>
<a class="btn" href="javascript:;">第三个控制按钮</a>
</nav>
</div>
<script src="tab.js"></script>
</body>
</html>
CSS代码(tab.css)：
*{ margin: 0; padding: 0 }
/*in为选项卡普通状态，默认不显示*/
.conList .conli{
display: none;
width: 600px;
height: 100px;
background: orange;
font-size: 50px;
line-height: 100px;
text-align: center;
}
.conList .on{
display: block;
}
/*控制按钮区域*/
.btnList{
margin-top: 6px;
}
/*btn为按钮普通状态，默认文字颜色为黑色*/
.btnList .btn{
display: inline-block;
color: black;
background-color: orange;
padding: 6px;
text-decoration:none;
}
.btnList .on{
background-color: #7a4201;
color: #fff;
}
/*btn_active为按钮选中状态，选中后文字颜色为白色*/
.btn_active{
color: white;
}
JS代码(tab.js)：
// 定义构造函数
var TabSwitch = function(parent){
// 获取内容区域
this.ulList = parent.getElementsByTagName(‘ul‘)[0];
this.liList = this.ulList.getElementsByTagName(‘li‘);
//获取控制按钮
this.btnList = parent.getElementsByTagName(‘nav‘)[0];
this.btns = this.btnList.getElementsByTagName(‘a‘);
// 添加事件
this.totalNum = this.btns.length; this.curIndex = 0; var _this = this;
for(var i = 0; i<this.totalNum; i++){ //方法一
// 设置索引
this.btns[i].index = i;
// 每个按钮点击事件
this.btns[i].onclick = function(){
_this.curIndex = this.index;
_this.toSwitch();
} //方法二：利用闭包 // this.btns[i].onclick = (function(i){ // return function(){ // _this.curIndex = i; // _this.toSwitch(); // } // })(i)
}
}
TabSwitch.prototype.toSwitch = function(){
//把所有的控制区域on样式清空
for(var i = 0; i<this.totalNum; i++){
this.btns[i].className = ‘btn‘;
this.liList[i].className = ‘conli‘;
}
// 为当前点击按钮设置样式
this.btns[this.curIndex].className += ‘ on‘;
// 为当前按钮对应选项设置样式
this.liList[this.curIndex].className += ‘ on‘;
}
// 实例
var oBox = document.getElementById(‘box‘);
var tab01 = new TabSwitch(oBox);
参考：http://www.cnblogs.com/xiaohuochai/p/4803964.html
时间： 2024-10-29 19:07:29