iframe 方式实现 tab 页,首页主动加载,其它页点击时加载
<!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>
?