Use the most basic object-oriented ideas to achieve tab tab effects:
Effect:
HTML code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Object-oriented tab implementation</title> <Linkrel= "stylesheet"href= "Tab.css"></Head><Body> <Divclass= "box"ID= "box"> <ulclass= "Conlist"> <Liclass= "Conli on">First Tab</Li> <Liclass= "Conli">Second tab</Li> <Liclass= "Conli">Third tab</Li> </ul> <navclass= "Btnlist"> <aclass= "btn on"href= "javascript:;">First control button</a> <aclass= "BTN"href= "javascript:;">A second control button</a> <aclass= "BTN"href= "javascript:;">A third control button</a> </nav> </Div> <Scriptsrc= "Tab.js"></Script></Body></HTML>
CSS code (TAB.CSS):
*{margin:0;padding:0}/*in tab normal state, default does not show*/. conlist. Conli{Display:None;width:600px;Height:100px;background:Orange;font-size:50px;Line-height:100px;text-align:Center;}. conlist. on{Display:Block;}/*Control button Area*/. Btnlist{Margin-top:6px;}/*BTN is the normal state of the button, the default text color is black*/. btnlist. BTN{Display:Inline-block;Color:Black;Background-color:Orange;padding:6px;text-decoration:None;}. btnlist. on{Background-color:#7a4201;Color:#fff;}/*btn_active the button is selected, the text color is white when selected*/. Btn_active{Color: White; }
JS Code (TAB.JS):
//Defining ConstructorsvarTabswitch =function(parent) {//Get content Area This. ullist = Parent.getelementsbytagname (' ul ') [0]; This. lilist = This. Ullist.getelementsbytagname (' Li '); //Get Control button This. btnlist = parent.getelementsbytagname (' nav ') [0]; This. Btns = This. Btnlist.getelementsbytagname (' a '); //Add Event This. Totalnum = This. Btns.length;
This. Curindex = 0;
var _this = this;
for(vari = 0; i< This. Totalnum; i++){
//Method one //Set Index This. Btns[i].index =i; //each button click event This. Btns[i].onclick =function() {_this.curindex= This. Index; _this.toswitch (); }
Method two: Using closures
This.btns[i].onclick = (function (i) {
return function () {
_this.curindex = i;
_this.toswitch ();
// }
// }) (i) }}tabswitch.prototype.toswitch=function(){ //Clear all Control area on style for(vari = 0; i< This. Totalnum; i++){ This. Btns[i].classname = ' btn '; This. Lilist[i].classname = ' Conli '; } //set the style for the current click button This. btns[ This. Curindex].classname + = ' on '; //sets the style for the current button's corresponding options This. lilist[ This. Curindex].classname + = ' on ';}//ExamplevarOBox = document.getElementById (' box ');varTAB01 =NewTabswitch (OBox);
Reference: http://www.cnblogs.com/xiaohuochai/p/4803964.html
Object-oriented tab implementation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
