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

Source: Internet
Author: User

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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.