<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>简洁Tab</title> <style type="text/css"> <!-- body,div,ul,li{ padding:0; text-align:center; display:inline; } body{ font:12px "宋体"; text-align:center; } a:link{ color:#00F; text-decoration:none; } a:visited { color: #00F; text-decoration:none; } a:hover { color: #c00; text-decoration:underline; } --> </style> <script> <!-- /*第一种形式 第二种形式 更换显示样式*/ 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?"hover":""; con.style.display=i==cursel?"block":"none"; } } //--> </script> </head> <body> <div class="Menubox"> <ul> <li id="one1" onclick="setTab('one',1,5)" >手机充值</li> <li id="one2" onclick="setTab('one',2,5)" >网上银行充值</li> <li id="one3" onclick="setTab('one',3,5)">支付宝充值</li> <li id="one4" onclick="setTab('one',4,5)">手机充值卡充值</li> <li id="one5" onclick="setTab('one',5,5)">金币账户充值</li> </ul> </div> <div class="Contentbox"> <div id="con_one_1" >新闻列表1</div> <div id="con_one_2" style="display:none">新闻列表2</div> <div id="con_one_3" style="display:none">新闻列表3</div> <div id="con_one_4" style="display:none">新闻列表4</div> <div id="con_one_5" style="display:none">新闻sssssssssssssssssssss列表5</div> </div> <br /> <div class="Menubox"> <ul> <li id="ccc1" onclick="setTab('ccc',1,5)" >手机充值</li> <li id="ccc2" onclick="setTab('ccc',2,5)" >网上银行充值</li> <li id="ccc3" onclick="setTab('ccc',3,5)">支付宝充值</li> <li id="ccc4" onclick="setTab('ccc',4,5)">手机充值卡充值</li> <li id="ccc5" onclick="setTab('ccc',5,5)">金币账户充值</li> </ul> </div> <div class="Contentbox"> <div id="con_ccc_1" >新闻列表1</div> <div id="con_ccc_2" style="display:none">新闻列表2</div> <div id="con_ccc_3" style="display:none">新闻列表3</div> <div id="con_ccc_4" style="display:none">新闻列表4</div> <div id="con_ccc_5" style="display:none">新闻sssssssssssssssssssss列表5</div> </div> </body> </html>