JavaScript Object-oriented series 4--instance (simplest object-oriented tab)

"Feature description"

Click on the three buttons to display the respective tabs

"HTML code description"

<div class= "box" id= "box" >    <ul class= "list" >        <li class= "in_active" > First tab </li>        <li class= "in" > second tab </li>        <li class= "in" > Third tab </li>    </ul>    < Nav class= "Conlist" >        <a class= "con_active" href= "javascript:;" > First control button </a>        <a class= "Con" href= "javascript:;" > Second control button </a>        <a class= "Con" href= "javascript:;" > Third control button </a>    </nav>    </div>

"CSS Key code description"

/*in tab normal state, default does not show*/.inch,. in_active{Display:none;    width:600px;    height:100px;    Background:orange; Font-size:50px; Line-height:100px; Text-Align:center;}/*In_active is selected for the tab and appears after selection*/. in_active{Display:block;}/*Con is the normal state of the button, the default text color is black*/. con,.con_active{Color:black; Background-Color:orange;}/*con_active the button is selected, the text color is white when selected*/. con_active{Color:white; }

"JS Code description"

functionTab (obj) {/*element gets*/    //get tab Show Section     This. olist = Obj.getelementsbytagname (' ul ') [0];  This. AIn = This. Olist.getelementsbytagname (' Li '); //get tab Control Section     This. oconlist = obj.getelementsbytagname (' nav ') [0];  This. ACon = This. Oconlist.getelementsbytagname (' a '); /*Variable Settings*/    //Tab Count     This. Count = This. Ain.length; //current Number of pages     This. Cur = 0; var_this = This;  for(vari = 0; I < This. Count; i++){        //Set Index         This. Acon[i].index =i; //add an event to a button         This. Acon[i].onclick =function() {_this.cur= This. Index; _this.Switch(); }}}tab.prototype.Switch=function(){    //Remove All     for(vari = 0; I < This. Count; i++){         This. Ain[i].classname = ' in ';  This. acon[i].classname = ' con '; }    //Displays the current     This. ain[ This. Cur].classname = ' in_active ';  This. acon[ This. Cur].classname = ' con_active '; }//get tab ElementvarOBox = document.getElementById (' box ');//Constructing Tab ObjectsvarTAB1 =NewTab (OBox);

"Effect Show"

"Source View"

JavaScript Object-oriented series 4--instance (simplest object-oriented tab)