面向对象实现的tab选项卡效果代码实例
分享一段代码实例，它实现了tab选项卡效果。
并且采用面向对象的方式实现tab选项卡，代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.tabMenu {
width: 300px;
margin: 50px auto 0 auto;
}
.tabMenu ul {
display: block;
overflow: hidden;
width: 300px;
height: 40px;
background: #eee;
}
.tabMenu ul li {
cursor: pointer;
display: block;
float: left;
width: 100px;
text-align: center;
height: 40px;
line-height: 40px;
font-size: 16px;
}
.tabMenu ul li.active {
background: #f00;
color: #fff;
}
.tabMenu .tabSide {
display: none;
padding: 10px;
line-height: 20px;
white-space: pre-wrap;
word-break: break-all;
width: 278px;
border: solid 1px #eee;
}
.tabMenu div.active {
display: block;
padding: 10px;
line-height: 20px;
white-space: pre-wrap;
word-break: break-all;
width: 278px;
border: solid 1px #eee;
}
</style>
<script>
window.onload = function () {
var main = document.getElementById("tabMain");
var tab = new Tab(main);
tab.init();
}
function Tab(id) {
this.aLi = id.getElementsByTagName("li");
this.oDiv = id.getElementsByTagName("div");
}
Tab.prototype.init = function () {
var obj = this;
for (var index = 0; index < obj.aLi.length; index++) {
obj.aLi[index].index = index;
obj.aLi[index].onclick = function () {
obj.fnClick(this);
}
}
}
Tab.prototype.fnClick = function (aLi) {
for (var index = 0; index < this.aLi.length; index++) {
this.aLi[index].className = "";
this.oDiv[index].style.display = "none";
}
aLi.className = "active";
this.oDiv[aLi.index].style.display = "block";
};
</script>
</head>
<body>
<div id="tabMain" class="tabMenu">
<ul>
<li class="active">前端教程网一</li>
<li>前端教程网二</li>
<li>前端教程网三</li>
</ul>
<div class="tabSide active">css教程</div>
<div class="tabSide">div教程</div>
<div class="tabSide">js教程</div>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload = function () {}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var main = document.getElementById("tabMain")，获取选项卡的容器元素。
（3）.var tab = new Tab(main),创建一个对象实例，构造函数的参数就是选项卡容器元素。
（4）.tab.init()，进行一些初始化操作。
（5）.function Tab(id) {
this.aLi = id.getElementsByTagName("li");
this.oDiv = id.getElementsByTagName("div");
}，构造函数，参数是一个元素对象。
（6）.Tab.prototype.init = function () {}，为原型对象添加一个init方法，它可以实现一些初始化操作。
（7）.var obj = this，将this暂存于变量obj，因为在不同的上下文长this指向的对象可能会不同，防止冲突。
（8）.for (var index = 0; index < obj.aLi.length; index++) {}，通过for循环批量注册事件处理函数。
（9）.obj.aLi[index].index = index，为当前元素对象自定义一个index属性，并赋值为当前索引值。
（10）.obj.aLi[index].onclick = function () {
obj.fnClick(this);
}，注册onclick事件处理函数。
（11）.Tab.prototype.fnClick = function (aLi) {}，实现了选项卡切换效果，参数是当前点击的li元素对象。
（12）.for (var index = 0; index < this.aLi.length; index++) {
this.aLi[index].className = "";
this.oDiv[index].style.display = "none";
}，通过for循环先将所有选项卡的class属性值清空，并将选项卡内容部分隐藏。
（13）.aLi.className = "active";this.oDiv[aLi.index].style.display = "block"，然后将当前点击的选项卡的class属性值设置为active，对应索引的选项卡内容设置为显示。
二.相关阅读:
（1）.getElementsByTagName()可以参阅document.getElementsByTagName()一章节。
（2）.prototype可以参阅javascript prototype原型一章节。
（3）.className可以参阅js className一章节。
面向对象实现的tab选项卡效果代码实例，这样的场景在实际项目中还是用的比较多的，关于面向对象实现的tab选项卡效果代码实例就介绍到这了。
面向对象实现的tab选项卡效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。