Learn how to use javascript object-oriented example to explain object-oriented tab _ javascript skills

This article mainly introduces the implementation method of object-oriented tabs to help you better learn javascript object-oriented, if you are interested, you can refer to the examples in this article to explain the simplest implementation method of the object-oriented tab and share it with you for your reference. The specific content is as follows:

:

1. Function Description

Click the three buttons to display the corresponding tabs.
2. html code Description

 
 
 
  
  
  
First Tab
  
  
  
Second Tab
  
  
  
Third Tab
 
 
 
 
 
  
The first control button, the second control button, and the third control button
  

3. css key code Description

/* In is the normal tab status. It is not displayed by default */. in ,. in_active {display: none; width: 600px; height: 100px; background: orange; font-size: 50px; line-height: 100px; text-align: center ;} /* in_active is the selected status of the tab, which is displayed */. in_active {display: block;}/* con is the normal button status. The default text color is black */. con ,. con_active {color: black; background-color: orange;}/* con_active is the selected button, and the selected text color is white */. con_active {color: white ;}

4. js Code Description

Function Tab (obj) {/* Element Acquisition * // obtain the display part of the Tab this. oList = obj. getElementsByTagName ('ul ') [0]; this. aIn = this. oList. getElementsByTagName ('lil'); // obtain the tab Control Section this. oConList = obj. getElementsByTagName ('nav') [0]; this. aCon = this. oConList. getElementsByTagName ('A');/* variable setting * // Number of tabs this. count = this. aIn. length; // the current number of this. cur = 0; var _ this = this; for (var I = 0; I <this. count; I ++) {// set the index this. aCon [I]. index = I; // Add the event this to the button. aCon [I]. onclick = function () {_ this. cur = this. index; _ this. switch () ;}} Tab. prototype. switch = function () {// remove all for (var I = 0; I <this. count; I ++) {this. aIn [I]. className = 'in'; this. aCon [I]. className = 'Con ';} // display the current this. aIn [this. cur]. className = 'in _ active'; this. aCon [this. cur]. className = 'Con _ active';} // obtain the tab element var oBox = document. getElementById ('box'); // construct the Tab object var tab1 = new Tab (oBox );

I hope this article will help you learn javascript object-oriented.