好多地方都会用到这样一个效果“点击tab切换内容页”,根据自己的想法实现了一下，写了个简单的插件。以前写代码都是标准的函数式编程，现在觉得面向对象编程看起来比较爽，并且更容易维护，于是就用oop的思想写了这个功能。
这里有两个文件change.js 和test.html，内容有注释，就直接上代码了。
js代码：
/*********查询节点是否包含某个样式*******/
var hasClass = function(tag, clsName) {
var arr = tag.className.split(/\s+/);
for (var i = 0; i < arr.length; i++) {
if (arr[i] == clsName) {
return true;
}
};
return false;
}
/*********扩展getElementsByClassName函数（兼容IE低版本）*********/
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(cls) {
var nodeArr = [];
var nodes = document.getElementsByTagName('*');
if (nodes && nodes.length > 0) {
for (var i = 0; i < nodes.length; i++) {
if (hasClass(nodes[i], cls)) {
nodeArr.push(nodes[i]);
}
};
}
return nodeArr;
}
} var changeTab = function(option) {
// body...
this.Init.apply(this, arguments);
} changeTab.prototype = {
/********参数的初始化********/
Init: function() {
var arr = Array.prototype.slice.call(arguments);
this.option = arr[0] || {
inittab: 0, //设置选中的tab索引
tab: '', //tab的className
tabclass: '', //tab点击之后的样式
container: '' //div的className
}; },
/*************函数执行**************/
render: function() {
///获取要操作的tab和div
this.tabs = document.getElementsByClassName(this.option.tab);
this.contents = document.getElementsByClassName(this.option.container);
if (this.tabs.length == 0 || this.contents.length == 0) {
return;
}
if (this.tabs.length != this.contents.length) {
return;
}
var that = this; ///由于闭包要用到此函数的参数，作用域不一致，所以要用that指向当前的函数
////设置初始显示的tab和div内容
this.contents[this.option.inittab].style.display = 'block';
this.tabs[this.option.inittab].className = that.option.tab + ' ' + that.option.tabclass;
for (var i = 0; i < this.tabs.length; i++) {
/////闭包
(function(num) {
that.tabs[num].onclick = function() {
for (var k = 0; k < that.contents.length; k++) {
///隐藏所有div和去除所有tab样式
that.contents[k].style.display = 'none';
that.tabs[k].className = that.option.tab;
};
///显示和设置当前点击的tab和div内容
this.className = that.option.tab + ' ' + that.option.tabclass;
that.contents[num].style.display = 'block';
}
})(i);
}
},
/*************为函数扩展功能**************/
extend: function(obj) {
if (obj && Object.prototype.toString.call(obj) == "[object Object]") {
for (prop in obj) {
this[prop] = obj[prop];
}
}
}
}
html代码：
<html>
<style type="text/css">
.current { background-color: red; }
.dv { background-color: green; width: 200px; height: 200px; }
</style>
<head>
<script type="text/javascript" src="change.js"></script>
<script type="text/javascript">
window.onload=function () { // body...
var tb=new changeTab( { inittab: 0, tab:'sp', tabclass:'current', container:'dv' });
tb.render();
}
</script>
</head>
<body> <div>
<span class="sp" >111</span>
<span class="sp">222</span>
<span class="sp">333</span>
</div>
<div id="">
<div class="dv" style="display: none; ">dv1</div>
<div class="dv" style="display: none; ">dv2</div>
<div class="dv" style="display: none; ">dv3</div>
<div>
</body>
</html>
由于页面设计能力有限，所以就写了比较简单的样式。大家主要看一下功能，有什么问题或者建议可以直接q我。