<!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>
分享到：
相关推荐
1. 创建TAB导航：创建一组链接或按钮作为TAB页的标签，每个标签对应一个Iframe要加载的页面。 ```html <li><a href="#" data-src="page1.html">页面1</a></li> <li><a href="#" data-src="page2.html">页面2</a>...
在我们的组件中，每个tab页将由一个iframe展示，每个iframe加载不同的网页内容。 接下来，我们来看`tab`标签。在UI设计中，tab是一种常见的布局方式，用户可以通过点击不同的tab来显示或隐藏相关的内容区域。在...
而当用户点击切换tab时，我们通过JavaScript动态地为选中标签的iframe设置正确的src属性值，从而实现按需加载。 具体来说，可以使用jQuery配合easyui的API来实现。首先在页面加载完成事件中，遍历所有的iframe，将...
在Layui的tab组件中，若要实现点击导航栏切换tab页时能够刷新内容，可以利用Layui提供的配置选项来实现。具体的方法是通过修改tab组件的配置项中的autoRefresh属性来达到效果。在未修改之前，autoRefresh的默认值为...
ASP.NET 中使用 iframe 动态加载页面 ASP.NET 中使用 iframe 动态加载页面是指在 ASP.NET 应用程序中使用 iframe ...因此，在使用 iframe动态加载页面时，需要注意安全性和性能问题，合理设计和实现 iframe 的使用。
在网页开发中，"基于iframe的js动态标签tab"是一个常见的功能实现，它结合了JavaScript、IFrame和Tab标签页的特性，为用户提供了一个交互式的浏览体验。这种技术主要用于在单个页面上加载和切换多个独立的内容区域，...
标题提到的“vue 页面tabs切换,替换iframe”，就是指用Vue的特性和组件来实现更加现代和灵活的Tab切换功能，避免使用iframe。下面将详细介绍如何使用`vue-router`的`router-view`和`keep-alive`来实现这一目标。 ...
同时，确保`iframe`在切换时加载新页面，而不是预先加载所有页面，以减少页面加载时间和数据使用。 5. **响应式设计**：考虑使用媒体查询实现响应式布局，使Tab组件在不同设备和屏幕尺寸上都能正常工作。 6. **...
以下是一种简单的实现方式： ```javascript $(document).ready(function() { var pages = ["page1.html", "page2.html", "page3.html"]; var index = 0; function switchPage() { $('#myIframe').attr('src', ...
在IT领域，特别是前端开发中，JavaScript（简称JS）被广泛用于实现网页的动态功能，包括页面跳转和对iframe内的页面进行跳转与刷新。本文将深入解析JS页面跳转的各种方法，以及如何利用JS操作iframe进行页面跳转和...
在Vue.js中实现嵌套页面通常涉及到使用`iframe`元素来加载外部网页或者内部组件。`iframe`允许我们在一个Vue应用中嵌入另一个独立的HTML文档，这对于展示第三方内容、实现某些特定功能或者处理复杂交互场景时非常...
当用户点击页签时，对应的iframe会加载相应的页面内容。开发者可以根据实际需求替换这些页面的URL，或者调整CSS样式以适应项目风格。 在实际应用中，你可能还需要考虑更多的功能，如添加Ajax动态加载内容、实现滑动...
通过jQuery的选择器和事件处理，实现点击tab时切换iframe的src属性，加载相应的内容。 ### 实例二：动态添加tab 在某些情况下，用户可能需要动态添加新的tab。这个实例将展示如何监听用户的添加请求，生成新的tab...
在这个“基于bootstrap用iframe实现的局部刷新的案例”中，我们将探讨如何利用Bootstrap结合JavaScript（特别是与标签相关的操作）以及iframe元素来实现页面的局部刷新和tab页切换效果。 首先，Bootstrap的Tab组件...
在这个例子中，可能有两个不同的实现方式，分别对应压缩包内的`cstab`和`jquery.benma.tab`两个文件。 `cstab`可能是作者自定义的一个jQuery插件，用于创建标签页。它可能包含了CSS样式、HTML结构和JavaScript逻辑...
4. **嵌套IFrame和Div**：在某些情况下，Tab内容可能包含IFrame，用于加载外部资源或者内嵌页面，例如其他应用程序的部分视图。`closable-tab-div.js`可能负责处理这些IFrame的创建和销毁，确保它们与Tab的生命周期...
至于标签中的“TabControl”，它通常指的是在Web应用中实现类似Windows操作系统中Tab控件的功能，让用户在一个区域通过点击不同的标签页查看不同的内容。TabControl可以使用HTML、CSS和JavaScript（或jQuery等库）...
vue项目中一个模板组件，不同iframe的src地址，对应不同的路由，不同标签页，且切换标签页不重载。这种客户的要求是特例在网上没有，所以纯自行手码。由于项目在vuex保存了标签页，所以初次进入该组件时，调用了一次...
通过绑定点击事件到各个tab元素，当用户点击某个tab时，jQuery会隐藏其他tab的内容，显示所选tab对应的内容区域，如果该内容区域是一个iframe，则会相应地更改iframe的src属性，从而加载新的页面。 实现这样的功能...
每个选项卡对应一个`iframe`，用户点击选项卡时，对应的`iframe`会显示其内容，同时可以实现窗口的自由关闭、打开，以及关闭其他或全部关闭的操作，这在管理多个任务或数据时非常有用。 在压缩包文件“AdminLTE-...