web页面实现tab的功能有几种实现方式，下面是使用UL LI DIV方式实现的tab。
<!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>tab</title> <style type="text/css"> .tab { height:23px;} .tab ul { list-style:none; } .tab li { border:1px solid #ccc; background:#eee; cursor:pointer; display:block; float:left; text-align:center; text-decoration:none; width:68px; font-size:12px; height:21px; line-height:21px; margin:0 2px; position:relative; top:1px; z-index:9; } .tab li:hover { text-decoration:underline; } .tab li.curr { background:#fff; border-bottom-color:#fff; cursor:default; font-weight:bold; } .cc { border:1px solid #ccc; padding:10px; width:300px;} </style> <script type="text/javascript"> // tab function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"curr":""; con.style.display=i==cursel?"block":"none"; } } </script> </head> <body> <div class="tab"> <ul> <li id="a1" onclick="setTab('a',1,3)" class="curr">tab_01</li> <li id="a2" onclick="setTab('a',2,3)">tab_02</li> <li id="a3" onclick="setTab('a',3,3)">tab_03</li> </ul> </div> <div id="con_a_1" class="cc">11<br />111<br />111<br />111</div> <div id="con_a_2" class="cc" style="display:none;">22<br />222<br />222<br />222</div> <div id="con_a_3" class="cc" style="display:none;">33<br />333<br />333<br />333</div> <br /> <br /> <div class="tab"> <ul> <li id="b1" onmousemove="setTab('b',1,3)" class="curr">tab_01</li> <li id="b2" onmousemove="setTab('b',2,3)">tab_02</li> <li id="b3" onmousemove="setTab('b',3,3)">tab_03</li> </ul> </div> <div id="con_b_1" class="cc">111<br />111<br />111<br />11</div> <div id="con_b_2" class="cc" style="display:none;">22<br />222<br />222<br />222</div> <div id="con_b_3" class="cc" style="display:none;">33<br />333<br />333<br />333</div> </body> </html>