标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>oop</title> </head> <style type="text/css"> .current {background-color: red; } .dv { background-color: green; width: 200px; height: 200px; color: #fff;} </style> <body> <div id="a"> <span myhref="http://www.unitever.com">111</span> <span myhref="http://www.baidu.com">222</span> <span myhref="http://www.sina.com">333</span> <a href="#">更多>></a> <div class="dv" style="display: none; ">111</div> <div class="dv" style="display: none; ">222</div> <div class="dv" style="display: none; ">333</div> </div> <div id="b"> <span myhref="http://www.google.com">333</span> <span myhref="http://www.sohu.com">444</span> <span myhref="http://www.taobao.com">555</span> <a href="#">更多>></a> <div class="dv" style="display: none; ">dv333333</div> <div class="dv" style="display: none; ">dv4444444</div> <div class="dv" style="display: none; ">dv5555555555</div> </div> </body> </html> <script type="text/javascript"> function tabChange(options){ this.options=options; this.fnclick(); } tabChange.prototype={ fnclick:function(){ var _this=this; var num=this.options.showIndex; this.options.TabBtn[num].className="current"; this.options.TabDiv[num].style.display="block"; if(this.options.moreLink){ this.options.moreLink.setAttribute("href",this.options.TabBtn[num].getAttribute("myhref")); } for (var i = 0; i < this.options.TabBtn.length; i++) { (function(index){ _this.options.TabBtn[index].onclick=function(){ _this.options.TabBtn[num].className=""; _this.options.TabDiv[num].style.display="none"; num=index; this.className="current"; _this.options.TabDiv[num].style.display="block"; if(_this.options.moreLink){ _this.options.moreLink.setAttribute("href",_this.options.TabBtn[num].getAttribute("myhref")); } } })(i) }; } } var aDiv=document.getElementById("a") var cBtn=aDiv.getElementsByTagName("span"); var cDiv=aDiv.getElementsByTagName("div"); var Aa2=aDiv.getElementsByTagName("a")[0]; new tabChange({showIndex:2,TabBtn:cBtn,TabDiv:cDiv,moreLink:Aa2}) var bDiv=document.getElementById("b") var Abtn=bDiv.getElementsByTagName("span"); var Adiv=bDiv.getElementsByTagName("div"); var Aa=bDiv.getElementsByTagName("a")[0]; new tabChange({showIndex:1,TabBtn:Abtn,TabDiv:Adiv,moreLink:Aa}) </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>oop</title> </head> <style type="text/css"> .current { background-color: red; } .dv { background-color: green; width: 200px; height: 200px; color: #fff;} </style> <body> <div id="a"> <span class="sp2" >111</span> <span class="sp2">222</span> <span class="sp2">333</span> <div class="dv" style="display: none; ">111</div> <div class="dv" style="display: none; ">222</div> <div class="dv" style="display: none; ">333</div> </div> <div id="b"> <span class="sp2" >333</span> <span class="sp2">444</span> <span class="sp2">555</span> <div class="dv" style="display: none; ">dv333333</div> <div class="dv" style="display: none; ">dv4444444</div> <div class="dv" style="display: none; ">dv5555555555</div> </div> </body> </html> <script type="text/javascript"> function tabChange(options){ this.options=options; this.fnclick(); } tabChange.prototype={ init:function(){ for(var i=0;i<this.options.TabBtn.length;i++){ this.options.TabBtn[i].className=""; this.options.TabDiv[i].style.display="none"; } }, fnclick:function(){ var _this=this; this.options.TabBtn[this.options.showIndex].className="current"; this.options.TabDiv[this.options.showIndex].style.display="block"; for (var i = 0; i < this.options.TabBtn.length; i++) { (function(index){ _this.options.TabBtn[index].onclick=function(){ _this.init(); this.className="current"; _this.options.TabDiv[index].style.display="block"; } })(i) }; } } var bDiv=document.getElementById("b") var Abtn=bDiv.getElementsByTagName("span"); var Adiv=bDiv.getElementsByTagName("div"); new tabChange({showIndex:0,TabBtn:Abtn,TabDiv:Adiv}) var aDiv=document.getElementById("a") var aBtn=aDiv.getElementsByTagName("span"); var aDiv=aDiv.getElementsByTagName("div"); new tabChange({showIndex:2,TabBtn:aBtn,TabDiv:aDiv}) </script>
这两种方式哪种更好一些啊，不知道啊，我个人觉得第一种应该好一些，不需要循环就可以搞定，应该比循环来的快，效率要高一些
标签：
原文地址：http://www.cnblogs.com/busicu/p/4209927.html
