<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> #wrap div,#wrap2 div{ width:180px; height:150px; background: red; display: none;} .active{background: #fcc; color: #fff;} </style> </head> <body> <div id="wrap"> <a href="#">左</a> <button>111</button><button>222</button><button>333</button> <a href="#">右</a> <div>11111111</div><div>2222222222</div><div>33333333333</div> </div> <div id="wrap2"> <a href="#">左</a> <button>111</button><button>222</button><button>333</button> <a href="#">右</a> <div>11111111</div><div>2222222222</div><div>33333333333</div> </div> </body> </html> <script type="text/javascript"> function tab(obj){ var _this=this; this.inow=0; this.oWrap=document.getElementById(obj); this.aBtn=this.oWrap.getElementsByTagName("button"); this.aDiv=this.oWrap.getElementsByTagName("div"); this.aArr=this.oWrap.getElementsByTagName("a"); this.aArr[1].onclick=function(){ _this.inow++; if(_this.inow==_this.aBtn.length){_this.inow=0}; _this.fnclick(_this.inow); } this.aArr[0].onclick=function(){ _this.inow--; if(_this.inow==-1){_this.inow=_this.aBtn.length-1}; _this.fnclick(_this.inow); } this.fnclick(this.inow); } //初始化方法 tab.prototype.init = function(num) { this.defaultstate(); this.aBtn[num].className="active"; this.aDiv[num].style.display="block"; } //恢复默认css状态 tab.prototype.defaultstate=function(){ for (var j = 0; j < this.aBtn.length; j++) { this.aBtn[j].className=""; this.aDiv[j].style.display="none"; } } //初始化和点击 tab.prototype.fnclick = function(n){ this.init(n); var _this=this; for (var i = 0; i < this.aBtn.length; i++) { this.aBtn[i].index=i; this.aBtn[i].onclick=function(){ _this.inow=this.index; _this.defaultstate(); _this.init(_this.inow); } }; } var s1= new tab("wrap"); var s1= new tab("wrap2"); </script>
对我这种值追求结果的人来说，用什么方法实现是不关注的，但是今天看了一个大神用面向对象的方法写js效果，感觉思路真是他妈的清晰，不得不爱呀，实际上我写的时候，感觉怎么那么的别扭。可能是我一直都对概念性的东西不感兴趣从而导致对概念理解不清楚，就想这个例子里面我也不知道把左右的按钮写在哪里，因为在我心里就没有面向对象的概念，其实在我心里还是感觉怎么方便怎么写，不过我看大神面向对象的思路确实很清楚，思路一清晰，丫的，思路清晰感觉代码都干净，于是今天下午就自己写了一个选项卡，说起来，选项卡都被前端做例子写懒了，哈哈...