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

时间：2022-11-30 12:23:59

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

JS实现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

标签：

相关文章