How to Learn about the object-oriented tab of javascript and how to explain javascript instances

How to Learn about the object-oriented tab of javascript and how to explain javascript instances

The example in this article explains the simplest implementation method of the object-oriented tab and shares 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

<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"> <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>

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.

Articles you may be interested in:

• Code for implementing the tab function in js
• Javascript common simple table tab implementation
• JavaScript browser tab Effect
• Example of hiding when jsp js mouse moves to a specified area to display the tab to exit
• Js/jQuery simple implementation of the tab Function
• Js tab Implementation Method
• Js implements simple tab switchover
• JavaScript code for implementing webpage TAB menu effects based on object-oriented
• JavaScript code for implementing webpage TAB menu effects based on object-oriented