好多地方都会用到这样一个效果“点击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我。