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

最新推荐文章于 2022-07-20 11:21:36 发布

追赶的蜗牛

最新推荐文章于 2022-07-20 11:21:36 发布

阅读量2.3k

点赞数 1

分类专栏： CSS js

本文链接：https://blog.csdn.net/yansong_8686/article/details/10157603

版权

js 同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

CSS

8 篇文章 0 订阅

订阅专栏

最近在做一个既能批量导入，也能单个录入的功能，具体实现是在一个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" 
				οnsubmit="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" οnsubmit="">
				<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

追赶的蜗牛

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
JS实现Tab标签（选项卡）切换效果

最近在做一个既能批量导入，也能单个录入的功能，具体实现是在一个jsp页面中采用了一个tab标签，具体效果如下：点击鼠标可以切换，具体实现如下： div{ font-size:12px; font-family: Verdana, Arial, Helvetica, sans-serif;}/**/ul.TabBarLevel{ lis
复制链接

扫一扫