首页 > 代码库 > 面向对象---选项卡
面向对象---选项卡
<!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>
这两种方式哪种更好一些啊，不知道啊，我个人觉得第一种应该好一些，不需要循环就可以搞定，应该比循环来的快，效率要高一些
面向对象---选项卡
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。