这个插件对应的html的结构如下　
<div class='box' id='tabfir'>         <ul id='taboptions'>             <li class='select'>页卡一</li>             <li>页卡二</li>             <li>页卡三</li>         </ul>         <div class='select'>             <div>1</div>             <div>2</div>             <div>3</div>             <div>4</div>         </div>         <div>内容二</div>         <div>内容三</div>     </div>
版本1
//实现一个选项卡封装：我们可以分析出，只要多个选项卡的主体结构一样，那么每个实现的思想都是一样的，唯一不一样的就是最外层的盒子不一样~function(){/*tabchange:封装一个选项卡的插件，只要大结构保持统一，以后实现选项卡的功能，只需要调取这个方法执行即可实现         param：container当前要实现选项卡的这个容器                defaultindex:默认选中项的索引*/function tabchange(container,defaultindex){var tabfirst = utils.firstchild(container),olis = utils.children(tabfirst);var divlist = utils.children(container,div);//让defaultindex对应的页卡有选中的样式defaultindex = defaultindex || 0;         utils.addclass(olis[defaultindex],select);         utils.addclass(divlist[defaultindex],select);//具体的切换功能for(var i = 0;i 版本2(将for循环改为使用事件委托的方式)
//实现一个选项卡封装：我们可以分析出，只要多个选项卡的主体结构一样，那么每个实现的思想都是一样的，唯一不一样的就是最外层的盒子不一样~function(){/*tabchange:封装一个选项卡的插件，只要大结构保持统一，以后实现选项卡的功能，只需要调取这个方法执行即可实现         param：container当前要实现选项卡的这个容器                defaultindex:默认选中项的索引*/function tabchange(container,defaultindex){var tabfirst = utils.firstchild(container),olis = utils.children(tabfirst);var divlist = utils.children(container,div);//让defaultindex对应的页卡有选中的样式defaultindex = defaultindex || 0;         utils.addclass(olis[defaultindex],select);         utils.addclass(divlist[defaultindex],select);//具体的切换功能                 //使用事件委托优化         tabfirst.onclick = function(e){             e = e || window.event;             e.target = e.target || e.srcelement;if(e.target.tagname.tolowercase()===li){//说明当前点击的是li标签                detailfn.call(e.target,olis,divlist);             }         }     }function detailfn(olis,divlist){var index = utils.index(this);         utils.addclass(this,select);for(var i = 0;i 版本3:面向对象的方式，使用构造函数
//实现一个选项卡封装：我们可以分析出，只要多个选项卡的主体结构一样，那么每个实现的思想都是一样的，唯一不一样的就是最外层的盒子不一样~function(){/*tabchange:封装一个选项卡的插件，只要大结构保持统一，以后实现选项卡的功能，只需要调取这个方法执行即可实现         param：container当前要实现选项卡的这个容器                defaultindex:默认选中项的索引*/function tabchange(container,defaultindex){this.init(container,defaultindex);     }     tabchange.prototype = {         constructor:tabchange,//注意重写原型方法，需要重新指定构造器//初始化 ，也是当前插件的唯一入口init:function(container,defaultindex){this.container = container || null;this.defaultindex = defaultindex || 0;this.tabfirst = utils.firstchild(this.container);this.olis = utils.children(this.tabfirst);this.divlist = utils.children(this.container,div);this.defaultindexeven();this.liveclick();return this;         },//事件委托实现绑定切换liveclick:function(){var _this = this;this.tabfirst.onclick = function(e){                 e = e || window.event;                 e.target = e.target || e.srcelement;if(e.target.tagname.tolowercase()===li){//说明当前点击的是li标签                    _this.detailfn(e.target);                 }             }         },         detailfn:function(curele){var index = utils.index(curele);             utils.addclass(curele,select);for(var i = 0;i 以上就是js选项卡的封装教程的详细内容。