一个简单的tab选项卡_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

一个简单的tab选项卡

来源：未知作者：类型：文章教程点击次数：发布时间：2014-05-16 12:15:57

一个简单的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">  </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>
提示：您可以先修改部分代码再运行