布局很简单。第一个选项卡box，第二个选项卡box2，这体现了面向对象构造函数级原型最大的优点 ，复用！
<div class="box" id="box"><input type="button" value="按钮1" class="on" /><input type="button" value="按钮2" /><input type="button" value="按钮3" /><div class="show">11111</div><div>22222</div><div>33333</div></div><div class="box" id="box2"><input type="button" value="按钮1" class="on" /><input type="button" value="按钮2" /><input type="button" value="按钮3" /><div class="show">11111</div><div>22222</div><div>33333</div></div>
样式我就不上了,如果这样式都不会，那也不用看下面的了
JS代码，不明白看可以看下注释
//元素获取function Tab(id){//Tab 构造函数this.oBox=document.getElementById(id);this.aBtn=this.oBox.getElementsByTagName('input');this.aDiv=this.oBox.getElementsByTagName('div');this.iNow=0;this.init();//选项卡操作在这里执行}//事件操作Tab.prototype.init=function (){//Tab原型var _this=this;//this 赋值，内部事件函数不能直接使用thisfor(var i=0; i<this.aBtn.length; i++){this.aBtn[i].index=i;this.aBtn[i].οnclick=function (){_this.iNow=this.index;//同理iNow赋值 tab();};}//选项卡核心function tab(){//这个是提出公共部分for(var i=0; i<_this.aBtn.length; i++){_this.aBtn[i].className='';_this.aDiv[i].className='';}_this.aBtn[_this.iNow].className='on';_this.aDiv[_this.iNow].className='show';}};
最后就是调用了，也可以说实例化，不是实例化的话 ，是用不了的。
window.οnlοad=function (){new Tab('box');new Tab('box2');};
如果觉得《面向对象选项卡》对你有帮助，请点赞、收藏，并留下你的观点哦！
