JS Learning summary----TAB encapsulation

The HTML for this plugin is structured as follows　

<div class= ' box ' id= ' Tabfir ' >        <ul id= ' taboptions ' >            <li class= ' select ' > page card one </li>            <li> page Card two </li>            <li> Page Three </li>        </ul>        <div class= ' select ' >            <div>1</div>            <div>2</div>            <div>3</div>            <div>4</div >        </div>        <div> content two </div>        <div> content three </div>    </div>

Version 1

//Implement a TAB encapsulation: we can analyze that as long as the main structure of multiple tabs, then the idea of each implementation is the same, the only difference is that the outermost box is not the same~function(){    /*Tabchange: Package A tab plug-in, as long as the large structure to maintain a unified, and later implement the functionality of the tab, only need to tune this method to implement the Param:container is currently implementing the tab of this container de Faultindex: Index of the default checked item*/    functionTabchange (container,defaultindex) {varTabfirst = Utils.firstchild (container), Olis =Utils.children (Tabfirst); varDivlist = Utils.children (container, "div"); //make the Defaultindex corresponding page card have the selected styleDefaultindex = Defaultindex | | 0; Utils.addclass (Olis[defaultindex],"Select"); Utils.addclass (Divlist[defaultindex],"Select"); //Specific switching functions         for(vari = 0;i<olis.length;i++) {Olis[i].onclick=function() {Utils.addclass ( This, "select"); varCursiblings = Utils.siblings ( This);  for(vari = 0;i<cursiblings.length;i++) {Utils.removeclass (cursiblings[i],"Select")                }                varindex = Utils.index ( This);  for(vari = 0;i<divlist.length;i++) {i===index? Utils.addclass (Divlist[i], "select"): Utils.removeclass (Divlist[i], "select") }}}} Window.ftab=Tabchange} ()

Version 2 (change the For loop to use the event delegate way)

//Implement a TAB encapsulation: we can analyze that as long as the main structure of multiple tabs, then the idea of each implementation is the same, the only difference is that the outermost box is not the same~function(){    /*Tabchange: Package A tab plug-in, as long as the large structure to maintain a unified, and later implement the functionality of the tab, only need to tune this method to implement the Param:container is currently implementing the tab of this container de Faultindex: Index of the default checked item*/    functionTabchange (container,defaultindex) {varTabfirst = Utils.firstchild (container), Olis =Utils.children (Tabfirst); varDivlist = Utils.children (container, "div"); //make the Defaultindex corresponding page card have the selected styleDefaultindex = Defaultindex | | 0; Utils.addclass (Olis[defaultindex],"Select"); Utils.addclass (Divlist[defaultindex],"Select"); //Specific switching functions//Use event delegation to optimize Tabfirst.onclick=function(e) {e= e | |window.event; E.target= E.target | |e.srcelement; if(e.target.tagname.tolowercase () = = = "Li") {//Description The current click is the LI tagDetailfn.call (e.target,olis,divlist); }        }    }    functionDETAILFN (olis,divlist) {varindex = Utils.index ( This); Utils.addclass ( This, "select");  for(vari = 0;i<olis.length;i++) {i!==index?utils.removeclass (Olis[i], "select"):NULL; I===index? Utils.addclass (Divlist[i], "select"): Utils.removeclass (Divlist[i], "select"); }} Window.ftab=Tabchange} ()

Version 3: Object-oriented approach, using constructors

//Implement a TAB encapsulation: we can analyze that as long as the main structure of multiple tabs, then the idea of each implementation is the same, the only difference is that the outermost box is not the same~function(){    /*Tabchange: Package A tab plug-in, as long as the large structure to maintain a unified, and later implement the functionality of the tab, only need to tune this method to implement the Param:container is currently implementing the tab of this container D Efaultindex: Index of the default checked item*/    functionTabchange (container,defaultindex) { This. Init (Container,defaultindex); } Tabchange.prototype={constructor:tabchange,//Note Overriding the prototype method requires the constructor to be re-specified        //initialization, also the only entry for the current pluginInit: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; },        //event delegates implement binding switchingLiveclick: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") {//Description The current click is the LI tag_THIS.DETAILFN (E.target); }}, DETAILFN:function(Curele) {varindex =Utils.index (Curele); Utils.addclass (Curele,"Select");  for(vari = 0;i< This. olis.length;i++) {i!==index?utils.removeclass ( This. olis[i], "select"):NULL; I===index? Utils.addclass ( This. divlist[i], "select"): Utils.removeclass ( This. divlist[i], "select"); }        },        //Set the default selected page card by indexDefaultindexeven:function() {Utils.addclass ( This. olis[ This. Defaultindex], "select"); Utils.addclass ( This. divlist[ This. Defaultindex], "select"); }} Window.ftab=Tabchange} ()//UsevarBox1 =NewFtab (boxlist[0],0)

JS Learning summary----TAB encapsulation