JavaScript高手之路：选项卡的封装
Posted 「已注销」
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript高手之路：选项卡的封装相关的知识，希望对你有一定的参考价值。
选项卡我相信开发过前端的同学都不陌生，有时候我们也把它叫做页签，在网站开发中我们经常把它作为导航栏来使用。Bootstrap和EasyUI都已经封装好了选项卡组件，但是今天我们还是想自己动手来实现自己的选项卡，它的大致效果如图：
本页面中有4个按钮和4个div，当用户选中按钮时，被选中的按钮背景色变黄，对应的红色背景div内容则显示出来，其他3个div则被隐藏，那么我们的页面代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
#box div
height: 300px;
width: 300px;
display: none;
background-color: red;
.active
background-color: yellow;
</style>
</head>
<body>
<div id="box">
<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />
<input type="button" value="按钮4" />
<div style="display: block">内容1</div>
<div>内容2</div>
<div>内容3</div>
<div>内容4</div>
</div>
</body>
</html>
该页面定义了一个div作为容器，里面套有4个input和4个div，这4个div由css的属性display:none控制为隐藏状态，然后在第1个div的style属性设置其display:block，明确指定第1个div为显示状态，接下来我们用上一节中学到的构造函数来封装这个选项卡。
构造函数封装选项卡
我们直接开门见山，我先直接给出代码，然后再说一下封装该的要点，代码如下：
var Tab = function(id)
var oTab = document.getElementById(id);
this.aBtn = oTab.getElementsByTagName("input");
this.aDiv = oTab.getElementsByTagName("div");
this.switchTab = function ()
that = this;
//这一层for循环给4个button注册单击事件
for(var i = 0; i < this.aBtn.length; i++)
this.aBtn[i].index = i;//并且记录当前按钮所在的数组中的下标
this.aBtn[i].onclick = function ()
//这一层for清空所有的按钮样式和div样式
for(var j = 0; j < that.aDiv.length; j++)
that.aDiv[j].style.display = ""; //清空每一个div的style
that.aBtn[j].className = ""; //清空每一个button的背景颜色
//this.index 表示当前用户选中的按钮
//给选中的button对应的div附加样式
that.aDiv[this.index].style.display = "block";
//给选中的button加背景颜色
that.aBtn[this.index].className = "active";
该类具有2个成员变量aBtn和aDiv，分别记录页面存在的4个button按钮和4个div，同时该类具有一个switchTab()，用于操作选项卡的切换功能，简单的UML类图如下：
值得一题的是在switchTab函数的代码中，第1层for循环的作用是给这4个按钮注册单击事件。在循环遍历这4个按钮的时候，每个按钮的下标将被记录在this.aBtn[i].index中，这是的this指的是Tab类，也就是包含4个按钮和4这4个div。然而当用户选中某一个按钮时，这时候的this指向当前选中的按钮，所以需要将指向Tab对象的this变量赋值给that，便于用this.index当作下标来取值。
上面是Tab选项卡的封装，下面是驱动代码，调用上面封装的Tab类。
window.onload = function ()
var tab = new Tab('box');
tab.switchTab();
字面量封装选项卡
上面是通过构造函数方式来封装的选项卡，现在我们将选项卡功能改为字面量方式来封装该类。
var Tab =
aBtn : null, //定义btn按钮数组
aDiv : null, //定义div数组
init : function(id)
var oTab = document.getElementById(id);
this.aBtn = oTab.getElementsByTagName("input");
this.aDiv = oTab.getElementsByTagName("div");
,
switchTab : function()
//循环遍历给button注册单击事件
for(var i = 0; i < this.aBtn.length; i++)
that = this;
this.aBtn[i].index = i;
this.aBtn[i].onclick = function ()
//循环清空每一个div和button的样式
for(var j = 0; j < that.aBtn.length; j++)
that.aBtn[j].className = "";
that.aDiv[j].style.display = "none";
//给当前选中的button和div赋值
that.aBtn[this.index].className = "active";
that.aDiv[this.index].style.display = "block";
;
代码思路第1章节一样，只是字面量封装的对象在调用的时候不需要new来创建对象，所以这里给出了init方法，然后调用代码如下：
window.onload = function ()
Tab.init('box'); //不需要new出一个对象
Tab.switchTab(); //直接调用switchTab方法
以上是关于JavaScript高手之路：选项卡的封装的主要内容，如果未能解决你的问题，请参考以下文章