论坛首页 → Web前端技术论坛 →

iframe 方式实现 tab 页,首页主动加载,其它页点击时加载

浏览 2521 次
锁定老帖子 主题：iframe 方式实现 tab 页,首页主动加载,其它页点击时加载
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • getclass
  • 等级: 初级会员
  • 性别:
  • 文章: 56
  • 积分: 90
  • 来自: 北京
   发表时间：2011-08-16   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TAB信息</title>
<script language="javascript">
 

	var CurrSelNo = 0; //当前选中的页签
	var MaxTabs = 7;//页签的数目

	function HovIt(objname) {
		if (CurrSelNo != objname) {
			var btn1 = 'tabInfotd' + objname;
			var btn2 = btn1 + 'R';
			document.getElementById(btn1).className = 'tabInfoHovT';
			document.getElementById(btn2).className = "tabInfoHovTR";
		}
	}

	
	function DefIt(objname) {
		if (CurrSelNo != objname) {
			var btn1 = 'tabInfotd' + objname;
			var btn2 = btn1 + 'R';
			document.getElementById(btn1).className = 'tabInfoDefT';
			document.getElementById(btn2).className = "tabInfoDefTR";
		}
	}

	
	function SelIt(objname) {
		var btn1;
		var btn2;
		for (i = 0; i < MaxTabs; i++) {
			btn1 = 'tabInfotd' + i;
			btn2 = btn1 + 'R';
			document.getElementById(btn1).className = 'tabInfoDefT';
			document.getElementById(btn2).className = "tabInfoDefTR";
			document.getElementById('tabInfo_frame' + i).style.display = 'none';
		}
		btn1 = 'tabInfotd' + objname;
		btn2 = btn1 + 'R';
		document.getElementById(btn1).className = 'tabInfoSelT';
		document.getElementById(btn2).className = "tabInfoSelTR";
		document.getElementById('tabInfo_frame' + objname).style.display = '';
		
		switch(objname){
			case '0': document.getElementById('tabInfo_frame' + objname).src = '${pageContext.request.contextPath}/searchParty/searchParty_goSearchParty.action';
						break;
			case '1': document.getElementById('tabInfo_frame' + objname).src = '${pageContext.request.contextPath}/searchParty/searchParty_goFindParty.action';
						break;
			default: document.getElementById('tabInfo_frame' + objname).src = '${pageContext.request.contextPath}/maintainParty/maintainParty_goAddParty.action';
		}
		//if(objname == 0){
		//	document.getElementById('tabInfo_frame' + objname).src = '${pageContext.request.contextPath}/searchParty/searchParty_goSearchParty.action';
		//}
		CurrSelNo = objname;
	}
</script>
</head>

<body>
<style type=text/css>
.tabInfoSelT {
	height: 22xp;
	font-family: Microsoft Sans Serif;
	font-size: 8pt;
	color: Black;
	padding: 2px 0 2px 7px;
	cursor: Default;
	background: url(images/ig_tab_winXP1.gif) no-repeat left top;
}

.tabInfoSelTR {
	width: 6px;
	cursor: Default;
	font-size: 2px;
	background: url(images/ig_tab_winXP1.gif) no-repeat right top;
}

.tabInfoDefT {
	border-width: 0px 0px 1px 0px;
	border-color: #949878;
	border-style: Solid;
	height: 22px;
	font-family: Microsoft Sans Serif;
	font-size: 8pt;
	color: Black;
	padding: 2px 0 0 7px;
	cursor: pointer;
	background: url(images/ig_tab_winXP3.gif) no-repeat left 2px;
}

.tabInfoDefTR {
	border-width: 0px 0px 1px 0px;
	border-color: #949878;
	border-style: Solid;
	width: 6px;
	cursor: pointer;
	font-size: 2px;
	background: url(images/ig_tab_winXP3.gif) no-repeat right 2px;
}

.tabInfoHovT {
	border-width: 0px 0px 1px 0px;
	border-color: #949878;
	border-style: Solid;
	height: 22px;
	font-family: Microsoft Sans Serif;
	font-size: 8pt;
	color: Black;
	padding: 2px 0 0 7px;
	cursor: pointer;
	background: url(images/ig_tab_winXP2.gif) no-repeat left 2px;
}

.tabInfoHovTR {
	border-width: 0px 0px 1px 0px;
	border-color: #949878;
	border-style: Solid;
	width: 6px;
	cursor: pointer;
	font-size: 2px;
	background: url(images/ig_tab_winXP2.gif) no-repeat right 2px;
}
</style>

<table border="0" cellspacing="0" cellpadding="0" id="igtabtabInfo" width="100%" height="100%" style="Z-INDEX:108;">
  <tr><td>
	  <table id="tabInfo_tbl" cellspacing="0" cellpadding="0" border="0" width="100%">
	  		<tr valign="center">
    				<td>
							<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
								<tr>
									<td nowrap id="tabInfotd0" align="center" class="tabInfoSelT"
										height="22px" unselectable="on" onmouseover="HovIt('0')"
										onmouseout="DefIt('0')" onclick="SelIt('0')">
										基本信息
									</td>
									<td nowrap id="tabInfotd0R" class="tabInfoSelTR" width="6px"
										unselectable="on" onmouseover="HovIt('0')"
										onmouseout="DefIt('0')" onclick="SelIt('0')">
									</td>
								</tr>
							</table>
					</td>
    				<td>
							<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
								<tr>
									<td nowrap id="tabInfotd1" align="center" class="tabInfoDefT"
										height="22px" unselectable="on" onmouseover="HovIt('1')"
										onmouseout="DefIt('1')" onclick="SelIt('1')">
										证件信息
									</td>
									<td nowrap id="tabInfotd1R" class="tabInfoDefTR" width="6px"
										unselectable="on" onmouseover="HovIt('1')"
										onmouseout="DefIt('1')" onclick="SelIt('1')">
									</td>
								</tr>
							</table>
					</td>
    				<td>
							<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
								<tr>
									<td nowrap id="tabInfotd2" align="center" class="tabInfoDefT"
										height="22px" unselectable="on" onmouseover="HovIt('2')"
										onmouseout="DefIt('2')" onclick="SelIt('2')">
										地址信息
									</td>
									<td nowrap id="tabInfotd2R" class="tabInfoDefTR" width="6px"
										unselectable="on" onmouseover="HovIt('2')"
										onmouseout="DefIt('2')" onclick="SelIt('2')">
									</td>
								</tr>
							</table>
					</td>
    				<td>
							<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
								<tr>
									<td nowrap id="tabInfotd3" align="center" class="tabInfoDefT"
										height="22px" unselectable="on" onmouseover="HovIt('3')"
										onmouseout="DefIt('3')" onclick="SelIt('3')">
										联系信息
									</td>
									<td nowrap id="tabInfotd3R" class="tabInfoDefTR" width="6px"
										unselectable="on" onmouseover="HovIt('3')"
										onmouseout="DefIt('3')" onclick="SelIt('3')">
									</td>
								</tr>
							</table>
					</td>
    				<td>
							<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
								<tr>
									<td nowrap id="tabInfotd4" align="center" class="tabInfoDefT"
										height="22px" unselectable="on" onmouseover="HovIt('4')"
										onmouseout="DefIt('4')" onclick="SelIt('4')">
										账户信息
									</td>
									<td nowrap id="tabInfotd4R" class="tabInfoDefTR" width="6px"
										unselectable="on" onmouseover="HovIt('4')"
										onmouseout="DefIt('4')" onclick="SelIt('4')">
									</td>
								</tr>
							</table>
					</td>
    				<td>
							<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
								<tr>
									<td nowrap id="tabInfotd5" align="center" class="tabInfoDefT"
										height="22px" unselectable="on" onmouseover="HovIt('5')"
										onmouseout="DefIt('5')" onclick="SelIt('5')">
										计划信息
									</td>
									<td nowrap id="tabInfotd5R" class="tabInfoDefTR" width="6px"
										unselectable="on" onmouseover="HovIt('5')"
										onmouseout="DefIt('5')" onclick="SelIt('5')">
									</td>
								</tr>
							</table>
					</td>
    <!--复制此段，并将tabInfotd(X)和tabInfotd(X)R改为相应增加的数值,后面的HovIt,DefIt,SelIt函数的调用值也要修改 -->
    				<td>
							<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
								<tr>
									<td nowrap id="tabInfotd6" align="center" class="tabInfoDefT"
										height="22px" unselectable="on" onmouseover="HovIt('6')"
										onmouseout="DefIt('6')" onclick="SelIt('6')">
										合同信息
									</td>
									<td nowrap id="tabInfotd6R" class="tabInfoDefTR" width="6px"
										unselectable="on" onmouseover="HovIt('6')"
										onmouseout="DefIt('6')" onclick="SelIt('6')">
									</td>
								</tr>
							</table>
					</td>
    	<!--段落结束-->
						<td nowrap style="font-size: 2px; cursor: default; border-width: 0px 0px 1px 0px; 
							border-color: #949878; border-style: Solid; width: 90%;">
						</td>
			</tr>
  		</table>
  		
 </td></tr>
 
	<tr>
	 	<td id="tabInfo_cp" bgcolor="#FEFCFD" style="border-width:0px 1px 1px 1px;border-color:#949878;
	 		border-style:Solid;background-color:#FEFCFD;padding:3px 0px 0px 0px;height:500px;width:803px;">
	 	<!-- 默认加载可以直接写在 src 上 -->
	  <iframe id="tabInfo_frame0" src="${pageContext.request.contextPath}/searchParty/searchParty_goSearchParty.action" style="" frameborder="0" width="100%" height="100%"></iframe>
	  <iframe id="tabInfo_frame1" style="display:none;" frameborder="0" width="100%" height="100%"></iframe>
	  <iframe id="tabInfo_frame2" style="display:none;" frameborder="0" width="100%" height="100%"></iframe>
	  <iframe id="tabInfo_frame3" style="display:none;" frameborder="0" width="100%" height="100%"></iframe>
	  <iframe id="tabInfo_frame4" style="display:none;" frameborder="0" width="100%" height="100%"></iframe>
	  <iframe id="tabInfo_frame5" style="display:none;" frameborder="0" width="100%" height="100%"></iframe>
	  <!--复制此段，并将tabInfo_frame改为相应增加的数值 -->
	  <iframe id="tabInfo_frame6" style="display:none;" frameborder="0" width="100%" height="100%"></iframe>
	  <!--段落结束-->
	  <div width="100%" height="100%" id="tabInfo_empty" style="display:none"> </div>
	 </td>
	</tr>
</table>

</body>
</html>
 
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics