<! 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>
<Style>
Ul {
List-style-type: none;
Margin-left:-40px;
Position: relative;
}
Ul li {
Padding: 5px;
Float: left;
Width: 80px;
Position: relative;
Display: block;
Border-top-width: 1px;
Border-right-width: 1px;
Border-left-width: 1px;
Border-top-style: solid;
Border-right-style: solid;
Border-left-style: solid;
Border-bottom-style: none;
Margin: 0px 2px 0px 0px ;;
Z-index: 2;
}
# L1 {
Background-color: # 9CC;
Border-top-color: # F6C;
Border-right-color: # F6C;
Border-left-color: # F6C;
}
# L2 {
Background-color: # CC9;
Border-color: #309;
Margin-left: 1px;
}
# L3 {
Background-color: # FF3;
Border-color: #360;
}
# L4 {
Background-color: #690;
Border-color: #360;
}
Div {
Width: 400px;
Height: 220px;
Position: absolute;
Margin-top: 28px;
Z-index: 1;
}
# D1 {
Background-color: # 9CC;
Border: 1px solid # C39;
}
# D2 {
Background-color: # CC9;
Border: 1px solid #309;
Display: none;
}
# D3 {
Background-color: # FF3;
Border: 1px solid #360;
Display: none;
}
# D4 {
Background-color: #690;
Border: 1px solid #360;
Display: none;
}
</Style>
<Script language = "javascript">
// Number of tabs
Var num = 4;
Function getTab (now ){
For (var I = 1; I <= num; I ++ ){
If (I = now ){
Document. getElementById ("d" + I). style. display = "block ";
} Else {
Document. getElementById ("d" + I). style. display = "none ";
}
}
}
</Script>
</Head>
<Body style = "margin: 0px;">
<Ul>
<Li id = "L1" onclick = "getTab (1)"> mobile digital </li>
<Li id = "L2" onclick = "getTab (2)"> mobile digital </li>
<Li id = "L3" onclick = "getTab (3)"> mobile digital </li>
<Li id = "L4" onclick = "getTab (4)"> mobile digital </li>
</Ul>
<Div id = "d1"> mobile digital </div>
<Div id = "d2"> household appliances </div>
<Div id = "d3"> Brand Apparel </div>
<Div id = "d4"> Brand Apparel </div>
</Body>
</Html>
From the column of youngerhao