利用最基础的面向对象的思想，实现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);