好多地方都会用到这样一个效果“点击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我。
新闻热点
疑难解答
