Home > Developer > JavaScript
Let's look at the final result of the code implementation:
Using JavaScript to realize the idea is very simple, is to first hide all the content, click on the title corresponding content display,
The CSS code is as follows:
<style type= "Text/css" >
#ltab {
Clear:both;
/ * Clear all floating styles * /
}
#ltab_1 {
Display:none;
}
#ltab_2 {
Display:none;
}
#ltab_3 {
Display:none;
}
</style>
HTML content Area:
<body>
/Title Area/
<div class= "Home__tab___4berq" >
<ul>
<li id= "tabc_0" class= "Home__active___1gdd2" onclick= "Changetab (' 0 ')" >
<span class= "Home__tab-text___2p3ej" > Latest news </span><span class= "HOME__LINE___12SRG" ></span>
</li>
<li id= "tabc_1" onclick= "Changetab (' 1 ')" >
<span class= "Home__tab-text___2p3ej" > Cow Dynamics </span><span class= "HOME__LINE___12SRG" ></span>
</li>
<li id= "tabc_2" onclick= "Changetab (' 2 ')" >
<span class= "Home__tab-text___2p3ej" > Warren rank </span><span class= "HOME__LINE___12SRG" ></span>
</li>
<li id= "tabc_3" onclick= "Changetab (' 3 ')" >
<span class= "Home__tab-text___2p3ej" > Master Strategy </span><span class= "HOME__LINE___12SRG" ></span>
</li>
</ul>
</div>
/content Area/
<div id= "Ltab" >
<div id= "Ltab_0" >
The details are too cumbersome to replace with simple text
</div>
<div id= "Ltab_1" >
The details are too cumbersome to replace with simple text
</div>
<div id= "ltab_2">
The details are too cumbersome to replace with simple text
</div>
<div id= "Ltab_3" >
The details are too cumbersome to replace with simple text
</div>
</div>
</body>
The JS code is as follows:
function Changetab (ltab_num) {
For (i = 0; I <= 3; i++) {
document.getElementById ("tabc_" + i). Classname= ""Hide all heading styles
document.getElementById ("ltab_" + i). Style.display = "None";Hide all the layers
}
document.getElementById ("Tabc_" +ltab_num). Classname= "HOME__ACTIVE___1GDD2" ///class= "HOME__ACTIVE___1GDD2" for the title of the currently selected state
document.getElementById ("ltab_" + ltab_num). Style.display = "block";Show current Layer
}
Related reference URL:
Http://www.jb51.net/article/74395.htm
How to use JavaScript for tab switching
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
