Home > Developer > JavaScript
Describes how to create tab js and jquery
This article mainly introduces how to create simple tabs js and jquery. For more information, see
The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Script type = "text/javascript" src = "jquery-1.8.2.js"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ("# Ul2 li"). click (function (){
Var num = $ (this). index ();
$ ("# Con2 div" ).css ("display", "none ");
$ ("# Con2 div" ).eq(num).css ("display", "block ")
})
})
</Script>
<Script type = "text/javascript">
Window. onload = function (){
Var ss = document. getElementById ("ul1"). getElementsByTagName ("li ");
Var pa = document. getElementById ("con ");
Var div = pa. getElementsByTagName ("div ");
// Alert (div. length)
Var ch;
For (var I = 0; I <ss. length; I ++ ){
Ss [I]. index = I;
Ss [I]. onclick = function (){
Ch = this. index;
For (var j = 0; j <div. length; j ++ ){
Div [j]. style. display = "none ";
If (j = ch ){
Div [j]. style. display = "block ";
}
}
}
}
}
</Script>
<Style type = "text/css">
Li {
Float: left;
Height: 30px;
Width: 100px;
Border: 1px #036 solid;
List-style: none;
Text-align: center}
# Con, # con2 {
Clear: both;
Border: 1px # 0CF solid;
Height: 200px;
Width: 200px;
Overflow: hidden}
# Con div, # con2 div {
Height: 200px;
Width: 200px;
Display: none}
</Style>
</Head>
<Body>
<! -- Js method implementation -->
<Ul id = "ul1">
<Li> Title 1 </li>
<Li> Title 2 </li>
<Li> Title 3 </li>
</Ul>
<Div id = "con">
<Div style = "display: block"> content 1 </div>
<Div> content 2 </div>
<Div> content 3 </div>
</Div>
<! -- Jquery method implementation -->
<Ul id = "ul2">
<Li> Title 1 </li>
<Li> Title 2 </li>
<Li> Title 3 </li>
</Ul>
<Div id = "con2">
<Div style = "display: block"> content 1 </div>
<Div> content 2 </div>
<Div> content 3 </div>
</Div>
</Body>
</Html>
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
