欢迎来到我爱模板网，请记住我们的域名5imoban.net。本站资源大部分免费下载。如需定制，可联系站长QQ543031222。如果您觉得本站不错，请推荐给您的好友！
各位热心的网友们，欢迎给本站留言！您的任何建议和意见本站都会认真查看，仔细采纳！
<!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"> <!-- *{margin:0px; padding:0px;} li{ list-style:none; margin:0px; padding:0px;} .c{ clear:both;} #box { width:1003px; background:#CCC; margin:0px auto; height:500px;} #tab{ background:#D2EEEC; border:1px solid #9BCFE8; border-bottom:none; height:23px; margin-top:20px; padding-top:2px;} #tab_ul{ display:block; height:23px; padding-left:30px; border-bottom:1px solid #9BCFE8} #tab_ul li{ display:block; float:left; margin-right:5px; border-radius:3px 3px 0px 0px; height:22px; line-height:22px; min-width:50px; border:1px solid #9BCFE8; border-bottom:none; cursor:pointer; _position:relative; _top:1px;} .hover{border-bottom:1px solid #ccc !important; background:#ccc;} #tab_box{ width:500px; height:300px;} #tab_box li{ width:500px; height:200px; clear:both;} --> </style> <script type="text/javascript"> 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":""; //如果i等于cursel，那么className为"hover"，如果不等于则为"" con.style.display=i==cursel?"block":"none";//如果i等于cursel，那么con的显示方式为"block" 否则为"none" } } </script> </head> <body> <div id="box"> <div id="tab"> <ul id="tab_ul"> <li id="one1" onclick="setTab('one',1,5)" class="hover">第一个</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> <ul id="tab_box"> <li id="con_one_1">内容1内容1内容1</li> <li id="con_one_2" style="display:none;">内容2内容2内容2</li> <li id="con_one_3" style="display:none;">内容3内容3内容3</li> <li id="con_one_4" style="display:none;">内容4内容4内容4</li> <li id="con_one_5" style="display:none;">内容5内容5内容5</li> </ul> </div> </body> </html> 提示：您可以先修改部分代码再运行
