JS实现Tab标签（选项卡）切换效果

来源：互联网发布：python数据库查询结果编辑：程序博客网时间：2024/04/29 02:08

最近在做一个既能批量导入，也能单个录入的功能，具体实现是在一个jsp页面中采用了一个tab标签，具体效果如下：

点击鼠标可以切换，具体实现如下：

<html> <head> <style type="text/css"> div{  font-size:12px;  font-family: Verdana, Arial, Helvetica, sans-serif;}/**/ul.TabBarLevel{list-style:none;margin:0;padding:0;height:29px;background-image:url(images/tabbar_level1_bk.gif);}ul.TabBarLevel li{float:left;padding:0;height:29px;margin-right:1px;background:url(images/tb_left_bk.gif) left top no-repeat;font-size: 9pt;}ul.TabBarLevel li a{display:block;line-height:29px;padding:0 20px;color:#333;background:url(images/tb_right_bk.gif) right top no-repeat;white-space: nowrap;font-size: 9pt;/*font-weight: bold;*/}ul.TabBarLevel li.Selected{background:url(images/tb_selected_left_bk.gif) left top no-repeat;font-size: 8pt;}ul.TabBarLevel li.Selected a{background:url(images/tb_selected_right_bk.gif) right top no-repeat;}ul.TabBarLevel li a:link,ul.TabBarLevel li a:visited{color:#006;text-decoration:none;}ul.TabBarLevel li a:hover,ul.TabBarLevel li a:active{color:#0033CC;text-decoration:none;}ul.TabBarLevel li.Selected a:link,ul.TabBarLevel li.Selected a:visited{color:#cc0000;text-decoration:none;font-weight: bold;}ul.TabBarLevel li.Selected a:hover,ul.TabBarLevel li.Selected a:active{color:#cc0000;text-decoration:none;}.framediv{width:100%;height: expression(document.body.clientHeight-108);padding:0;margin:0;overflow: auto;position: absolute;}.CContent{background-color: #FFFFFF;width:100%;}</style> <script type="text/javascript">  function getTab(flag) {    var elList, i;  elList = document.getElementsByTagName("li");  for (i = 0; i < elList.length; i++){ elList[i].className ="";  }  elList[flag].className ="Selected";  elList[flag].blur();}function gotoTab(flag){    if("0"==flag){//控制div 隐藏    document.getElementById("luru").style.display = "";    document.getElementById("shangchuan").style.display = "none";} else if("1"==flag){document.getElementById("luru").style.display = "none";    document.getElementById("shangchuan").style.display = "";}getTab(parseInt(flag));}</script> <meta name="GENERATOR" content="MSHTML 8.00.7600.16535"> </head> <body>  <DIV class="div_content" style="width:100%;border:1px;background-color:#FFFFFF;border-color: blue">    <div style="padding:0;width:100%" align="center"><ul class="TabBarLevel" id="TabPage" style="float:center;"><li class="Selected" style="margin-left: 5px"><a href="javascript:void(0)" onFocus="this.blur();"onClick="gotoTab('0');">测试test1</a></li><li><a href="javascript:void(0)" onFocus="this.blur();"onClick="gotoTab('1');">测试test2</a></li></ul>     </div>  </DIV>  <div class="framediv" id="luru" style="overflow: auto;"><form action="epolicyapply.do?method=addApply" method="post"enctype="multipart/form-data" onsubmit="return changeAction(this);"  ><input type="hidden" name="customerID" value="" /><input type="hidden" name="singleSign" value=""/><input type="hidden" name="unitCode" value=""><table width="600%" border="0" cellpadding="0" cellspacing="0"class="CContent" align="center"><tr><td>这里是测试test1里的内容，Hi,lllllll</td></tr></table></form>   </div>  <div class="framediv" id="shangchuan" style="display: none;overflow: auto;"><form action="/commonepolicyapply.do?method=uploadExcel"method="post" enctype="multipart/form-data" onsubmit=""><fieldset><legend>test</legend><table width="98%" border="0" align="center" cellpadding="2"cellspacing="1"><tr>  <td> 速度飞洒地方撒旦法师</td> </tr></table></fieldset></form>   </div>   </body> </html>

具体代码及图片，见我的资源 http://download.csdn.net/detail/yansong_8686/5988755