<!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>选项卡</title> <style type="text/css"> *{ margin:0; padding:0;} ol{ margin:0; padding:0; float:left;} ol li{ list-style-type:none;} body{ font-size:12px;} .tab div{display:none;} .tab1{ height:27px; line-height:27px; width:200px; text-align:center;} .tab1 span{width:22px;float:left;border:1px solid #fc9;line-height:18px;height:18px; margin:9px 2px 0 2px; display:block;border-bottom:0;cursor:pointer;} .tab1 .span2{background:#fc9; border-bottom:0;margin-top:9px; } .tab div.b1{display:block} .bg1{ padding-left: 30px;width:190px; background:#F93;height:300px;padding-left:30px;} .bg1 ol{ background:#fc9;} </style> <script type="text/javascript"> function setTab(m,n){ var tabs_menu=document.getElementById('tabs1').getElementsByTagName('span'); for(var i=0;i<tabs_menu.length;i++){ var tab_main=document.getElementById('tabs'+m+'_main'+i); tabs_menu[i].className=(i==n?'span2':''); tab_main.style.display=(i==n?'block':'none'); } } </script> </head> <body> <div class="tab bg1"> <div class="tab1 b1" id="tabs1"> <span class="span2" onclick="setTab(1,0)">周</span> <span onclick="setTab(1,1)">月</span> <span onclick="setTab(1,2)">总</span> </div> <div id="tabs1_main0" class="b1"> <ol> <li class="li2"><a href="#">111一个人的地老天荒</a></li> <li class="li3"><a href="#">血酬定律</a></li> <li class="li4"><a href="#">11111（A卷）</a></li> <li class="li5"><a href="#">中国式申奥</a></li> <li class="li6"><a href="#">手段——古代帝王、名</a></li> <li class="li7"><a href="#">古古博彩有术</a></li> <li class="li8"><a href="#">埃及之谜</a></li> <li class="li9"><a href="#">中国文化大汇集（一）</a></li> <li class="li10"><a href="#">笑林广记</a></li> </ol> </div> <div id="tabs1_main1"> <ol > <li class="li2"> <a href="#">222一个人的地老天荒</a></li> <li class="li3"> <a href="#">西游漫记</a></li> <li class="li4"> <a href="#">中国文化大汇集（一）</a></li> <li class="li5"><a href="#">血酬定律</a></li> <li class="li6"> <a href="#">笑林广记</a></li> <li class="li7"> <a href="#">swfdf（A卷）</a></li> <li class="li8"> <a href="#">中国式申奥</a></li> <li class="li9"> <a href="#">手段——古代帝王、名</a></li> <li class="li10"> <a href="#">古古博彩有术</a></li> </ol> </div> <div id="tabs1_main2"> <ol> <li class="li2"> <a href="#">333一个人的地老天荒</a></li> <li class="li3"> <a href="#">西游漫记</a></li> <li class="li4"><a href="#">中国文化大汇集（一）</a></li> <li class="li5"> <a href="#">血酬定律</a></li> <li class="li6"> <a href="#">ssaaaaaaa</a></li> <li class="li7"> <a href="#">短篇恐怖故事（A卷）</a></li> <li class="li8"> <a href="#">中国式申奥</a></li> <li class="li9"> <a href="#">手段——古代帝王、名</a></li> <li class="li10"> <a href="#">古古博彩有术</a></li> </ol> </div> </div> </body> </html>