一个简单的CSS+JS选项卡
<!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=gb2312" /><title>无标题文档</title><style type="text/css"> body{font-size:14px;} ul{margin:0; padding:0; list-style:none;} li{margin:0; padding:0; float:left; text-align:center; line-height:28px; width:60px; cursor:pointer;} #box{height:28px; background-color:#7d97a4;} #textbox{height:40px; border:1px solid #ccc;} .active{color:#fff; font-weight:900; background-color:#000;} .normal{color:#000; background-color:#7d97a4;} .none{display:none;}</style><script type="text/javascript"> function tabfun(a,b){ var c=a.parentNode.id; var d=document.getElementById(c).getElementsByTagName("li"); for(i=0; i<d.length;i++){ if(i==b){ a.className="active"; document.getElementById(c+"_"+i).style.display="block"; } else{ d[i].className="normal"; document.getElementById(c+"_"+i).style.display="none"; } } }</script></head><body> <div id="box" align="center"> <ul id="tabbox"> <li onclick="tabfun(this,0)">菜单一</li> <li onclick="tabfun(this,1)">菜单二</li> <li onclick="tabfun(this,2)">菜单三</li> <li onclick="tabfun(this,3)">菜单四</li> <li onclick="tabfun(this,4)">菜单五</li> <li onclick="tabfun(this,5)">菜单六</li> </ul> </div> <div id="textbox"> <div id="tabbox_0">我是谁？</div> <div id="tabbox_1" class="none">她是你的谁？</div> </div></body></html>