Simplest JavaScript to implement Tab tab page switching (recommended) _javascript tips

First, one of the most earthy ways:

Html:

<div class= "Tab-head" >
 
 

Css:

H2 {
border-top:solid cornflowerblue 1px;
Border-left:solid cornflowerblue 1px;
width:50px;
height:25px;
margin:0;
Float:left;
Text-align:center
}
. tab-content {
border:solid cornflowerblue 1px;
width:152px;
height:100px
}
. Tab-content div{
display:none;
Selected {
background-color:cornflowerblue
}
. Tab-content. show{
Display:block;

Js:

var tab1 = document.getElementById (' tab1 '),
tab2 = document.getElementById (' tab2 '),
tab3 = document.getElementById (' tab3 '),
c1 = document.getElementById (' C1 '),
c2 = document.getElementById (' C2 '),
C3 = document.getElementById (' C3 ');
function ChangeTab1 () {
tab1.classname = ' selected ';
Tab2.classname = ';
Tab3.classname = ';
C1.classname = ' show '
c2.classname = ';
C3.classname = ';
}
function ChangeTab2 () {
tab1.classname = ';
Tab2.classname = ' selected ';
Tab3.classname = ';
C1.classname = ';
C2.classname = ' show ';
C3.classname = ';
}
function ChangeTab3 () {
tab1.classname = ';
Tab2.classname = ';
Tab3.classname = ' selected ';
C1.classname = '
c2.classname = ';
C3.classname = ' show ';

Effect:

To implement tab switching, it is easy to think of a way to add IDs to each label to be controlled, then write the mouse events individually, use IDs to get each element, and precisely control the style of each element.

The disadvantage of this approach is obvious, a few elements have several IDs, each tab to write function, the same method inside. To increase the tab, you also need to increase the ID and function, code redundancy, not easy to expand.

The second, more sophisticated approach is to write a function that passes the ordinal of each element.

Html:

<div class= "Tab-head" >
 
 

Js:

var tabs = document.getelementsbyclassname (' Tab-head ') [0].getelementsbytagname (' H2 '),
contents = Document.getelementsbyclassname (' tab-content ') [0].getelementsbytagname (' div ');
function Changetab (index) {
for (var i = 0, len = tabs.length i < len; i++) {
if (i = = index) {
TABS[I].CLA Ssname = ' selected ';
Contents[i].classname = ' show ';
} else{tabs[i].classname = ';
Contents[i].classname = '; }
}
}

This allows you to write a function and do not need an ID, but still pass the parameters in order.

The third approach is the same as the second one, except that the parameter passes the this pointer.

Html:

<div class= "Tab-head" >
 
 

Js:

var tabs = document.getelementsbyclassname (' Tab-head ') [0].getelementsbytagname (' H2 '),
contents = Document.getelementsbyclassname (' tab-content ') [0].getelementsbytagname (' div ');
function changetab (tab) {
for (var i = 0, len = tabs.length i < len; i++) {
if (tabs[i] = = tab) {
tabs[i ].classname = ' selected ';
Contents[i].classname = ' show ';
} else {
tabs[i].classname = ';
Contents[i].classname = ';
}
}

This is a slightly more convenient way to pass the this pointer and not to pass the ordinal number in order, but that is not the easiest way to do so.

One of the easiest:

The Fourth Way:

Html:

<div class= "Tab-head" >
 
 

Js:

var tabs = document.getelementsbyclassname (' Tab-head ') [0].getelementsbytagname (' H2 '),
contents = Document.getelementsbyclassname (' tab-content ') [0].getelementsbytagname (' div ');
(Function changetab (tab) {
for (var i = 0, len = tabs.length i < len; i++) {
tabs[i].onmouseover = showtab;
   
    }
})();
function ShowTab () {
for (var i = 0, len = tabs.length i < len; i++) {
if (tabs[i] = = this) {
Tabs[i].clas sname = ' selected ';
Contents[i].classname = ' show ';
} else {
tabs[i].classname = ';
Contents[i].classname = ';
}
}

   

So JS, Html, CSS completely separated, through the this pointer can determine the current mouse over which one of the tab.

The above is a small set to introduce the most simple JavaScript to Achieve Tab tab page switch mode (recommended), I hope to help you, if you have any questions please leave a message, small series will promptly reply to everyone, here also thank you for your support cloud Habitat community site!