Home > Developer > JavaScript
The tab switching principle and implementation method of javascript are as follows: javascripttab
This article describes how to implement tab switching in javascript. Share it with you for your reference.
The specific implementation method is as follows:
Copy codeThe Code is as follows: <Head>
<Style type = "text/css">
# Container {border: solid 1px green; width: 300px; height: 300px ;}
Li {float: left; margin-left: 20px ;}
P {float: left ;}
# Sports, # military, # bbs {display: none ;}
</Style>
<Script type = "text/javascript">
Function tab (pid ){
Var ps = ['News', 'Sports ', 'military', 'bbs '];
For (var I = 0, len = ps. length; I <len; I ++ ){
If (ps [I] = pid ){
Document. getElementById (ps [I]). style. display = "block ";
} Else {
Document. getElementById (ps [I]). style. display = "none ";
}
}
}
</Script>
</Head>
<Body>
<Div id = "container">
<Ul>
<Li onmouseover = "tab ('News');"> news </li>
<Li onmouseover = "tab ('Sports ');"> sports </li>
<Li onmouseover = "tab ('military');"> military </li>
<Li onmouseover = "tab ('bbs ');"> Forum </li>
</Ul>
<P id = "news"> news </p>
<P id = "sports"> sports </p>
<P id = "military"> military, military, and military </p>
<P id = "bbs"> forum Forum </p>
</Div>
</Body>
</Html>
I hope this article will help you design javascript programs.
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
