This article illustrates the simplest method of object-oriented tab implementation, sharing for everyone to reference, the specific contents are as follows
Effect Chart:
1. Function description
Click three buttons to display the corresponding tabs individually
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" >
<a class= "con_active" 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 state of the tab, the default does not show *
/. in,.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 displays
/
in_active{display:block When selected. /*con is the normal state of the button, the default text color is black
/. con,.con_active{
Color:black;
Background-color:orange;
}
/*con_active is selected for the button, and the text color is white
/con_active{
color:white.
4, JS code description
function Tab (obj) {
/* element get
///Get tab Show part
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 set *
///tab number
This.count = this.aIn.length;
Current first few
this.cur = 0;
var _this = this;
for (var i = 0; i < This.count; i++) {
//Set index
this.acon[i].index = i;
Add Event
This.acon[i].onclick = function () {
_this.cur = This.index to the button;
_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 ';
}
Show current
this.ain[this.cur].classname = ' in_active ';
This.acon[this.cur].classname = ' con_active ';
}
Gets the tab element
var obox = document.getElementById (' box ');
Constructs the Tab object
var tab1 = new Tab (Obox);
Hopefully this article will help you learn about JavaScript-oriented objects.