In fact, the use of anchor points as a marker, through the click to achieve the switch. CSS Code
The
code is as follows:
body,div,ul,li{margin:0; padding:0; font-size:12px;}
. clearfloat{clear:both; height:0; line-height:0; font-size:0;
. tab_ul{margin:10px auto 0; padding-left:20px; width:228px; height:31px; Background-color: #FCEDFF; border:1px Solid #DBA4E8; border-bottom:0;}
. Tab_ul li{float:left; display:inline; margin:5px 0 0 5px; width:46px; height:26px;
. Tab_ul Li a{display:block;width:46px; height:26px; line-height:26px; text-align:center;font-size:12px; color:# 000000; Text-decoration:none;}
. Tab_ul li A:hover{color: #5F0082; font-weight:bold;}
. tabdiv{margin:0 Auto; width:248px; height:200px; border:1px solid #DBA4E8; border-top:0; overflow:hidden;}
. tabdiv ul{margin:0 Auto; padding-top:10px; width:218px; height:190px;}
. Tabdiv ul li{height:24px;color: #666666; font-size:12px; margin-left:20px;}
. tabdiv ul li a{color: #333333; margin-left:5px;}
The
code is as follows:
</pre>html codes <pre name= "code" class= "CSS" ><body>
<!--tab-->
<ul class= "Tab_ul" >
<li><a href= "#ul1" > directory 1</a></li>
<li><a href= "#ul2" > directory 2</a></li>
<li><a href= "#ul3" > directory 3</a></li>
<li><a href= "#ul4" > directory 4</a></li>
</ul>
<div class= "Tabdiv" >
<ul id= "UL1" >
<li><a href= "#" >java</a></li>
<li><a href= "#" >c++</a></li>
<li><a href= "#" >c#</a></li>
<li><a href= "#" >php</a></li>
<li><a href= "#" >javascript</a></li>
<li><a href= "#" >css</a></li>
<li><a href= "#" >html</a></li>
</ul>
<ul id= "Ul2" >
<li><a href= "#" > Chinese </a></li>
<li><a href= "#" > Math </a></li>
<li><a href= "#" > English </a></li>
<li><a href= "#" > History </a></li>
<li><a href= "#" > Geography </a></li>
<li><a href= "#" > Biology </a></li>
<li><a href= "#" > Chemistry </a></li>
</ul>
<ul id= "Ul3" >
<li><a href= "#" > Red </a></li>
<li><a href= "#" > Yellow </a></li>
<li><a href= "#" > Orange </a></li>
<li><a href= "#" > Green </a></li>
<li><a href= "#" > Purple </a></li>
<li><a href= "#" > Blue </a></li>
<li><a href= "#" > Black </a></li>
</ul>
<ul id= "Ul4" >
<li><a href= "#" > Operations </a></li>
<li><a href= "#" > Design </a></li>
<li><a href= "#" > Products </a></li>
<li><a href= "#" > Program </a></li>
<li><a href= "#" > Art </a></li>
<li><a href= "#" > Interaction </a></li>
<li><a href= "#" > Manager </a></li>
</ul>
</div>
<!--tab End-->
</body>
