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

最新推荐文章于 2022-07-18 20:36:48 发布
最新推荐文章于 2022-07-18 20:36:48 发布
阅读量506 收藏 2
点赞数
分类专栏： html 文章标签： tab页 iframe 

<!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" οnmοuseοver="HovIt('0')"
										οnmοuseοut="DefIt('0')" οnclick="SelIt('0')">
										基本信息
									</td>
									<td nowrap id="tabInfotd0R" class="tabInfoSelTR" width="6px"
										unselectable="on" οnmοuseοver="HovIt('0')"
										οnmοuseοut="DefIt('0')" οnclick="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" οnmοuseοver="HovIt('1')"
										οnmοuseοut="DefIt('1')" οnclick="SelIt('1')">
										证件信息
									</td>
									<td nowrap id="tabInfotd1R" class="tabInfoDefTR" width="6px"
										unselectable="on" οnmοuseοver="HovIt('1')"
										οnmοuseοut="DefIt('1')" οnclick="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" οnmοuseοver="HovIt('2')"
										οnmοuseοut="DefIt('2')" οnclick="SelIt('2')">
										地址信息
									</td>
									<td nowrap id="tabInfotd2R" class="tabInfoDefTR" width="6px"
										unselectable="on" οnmοuseοver="HovIt('2')"
										οnmοuseοut="DefIt('2')" οnclick="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" οnmοuseοver="HovIt('3')"
										οnmοuseοut="DefIt('3')" οnclick="SelIt('3')">
										联系信息
									</td>
									<td nowrap id="tabInfotd3R" class="tabInfoDefTR" width="6px"
										unselectable="on" οnmοuseοver="HovIt('3')"
										οnmοuseοut="DefIt('3')" οnclick="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" οnmοuseοver="HovIt('4')"
										οnmοuseοut="DefIt('4')" οnclick="SelIt('4')">
										账户信息
									</td>
									<td nowrap id="tabInfotd4R" class="tabInfoDefTR" width="6px"
										unselectable="on" οnmοuseοver="HovIt('4')"
										οnmοuseοut="DefIt('4')" οnclick="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" οnmοuseοver="HovIt('5')"
										οnmοuseοut="DefIt('5')" οnclick="SelIt('5')">
										计划信息
									</td>
									<td nowrap id="tabInfotd5R" class="tabInfoDefTR" width="6px"
										unselectable="on" οnmοuseοver="HovIt('5')"
										οnmοuseοut="DefIt('5')" οnclick="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" οnmοuseοver="HovIt('6')"
										οnmοuseοut="DefIt('6')" οnclick="SelIt('6')">
										合同信息
									</td>
									<td nowrap id="tabInfotd6R" class="tabInfoDefTR" width="6px"
										unselectable="on" οnmοuseοver="HovIt('6')"
										οnmοuseοut="DefIt('6')" οnclick="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>
 
getclass
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Layui】layui中iframe子页面中的链接点击后在父页面中动态添加tab选项
德仔
06-01 845
iframe子页面的主要HTML结构（js文件是在子页面中引入）： 添加异常履历 效果：
使用jQuery让iframe自动加载
zyy_jay的专栏
09-06 529
主要是用到jQuery里面的$('#XXX').attr("src","urlstr");方法,把指定的urlstr赋给操作元素的src属性 [code="java"] jQuery.noConflict(); function initFirstTab(){ jQuery('#user_bottom').attr("...
datagrid easyUI 那个tab灵活加上iconcls
beerchina的博客
07-11 604
function addTab(title, href,icon){ var tt = $('#tabs'); if (tt.tabs('exists', title)){//如果tab已经存在,则选中并刷新该tab tt.tabs('select', title); refreshTab({tabTit...
多TAB页管理管理后台 用iframe加载页面使用注意事项：iframe高度自适应，内外部js相互调用等
chuangxin的专栏
07-30 3479
使用iframe实现多tab页后台管理是一种普遍的处理方式，尤其在企业信息化WEB应用中更是常见。使用iframe实现多tab页虽说很简单，但在实际项目应用中也需要注意几个问题：iframe高度自适应问题，iframe页面切换内存泄漏问题，iframe页面js代码与父页面js代码如何相互调用问题。
[原]jQuery Tab插件，用于在Tab中显示iframe，附源码和详细说明
weixin_30696427的博客
06-25 193
最近有个需求，需要在Tab中放置iFrame，于是做了一个jQuery的Tab插件。 欢迎提bug或是建议，在有空的情况下我尽量完善。 作者: think8848（公司主页: http://www.cleversoft.com, QQ: 166156888, Blog: http://think8848.cnblogs.com) 转载请保留此信息 CleverTabs是一款jQuery...
使用Iframe实现TAB页面切换
08-06
1. 创建TAB导航：创建一组链接或按钮作为TAB页的标签，每个标签对应一个Iframe要加载的页面。 ```html <li><a href="#" data-src="page1.html">页面1</a></li> <li><a href="#" data-src="page2.html">页面2</a>...
在vue中实现嵌套页面(iframe)
10-15
在Vue.js中实现嵌套页面通常涉及到使用`iframe`元素来加载外部网页或者内部组件。`iframe`允许我们在一个Vue应用中嵌入另一个独立的HTML文档，这对于展示第三方内容、实现某些特定功能或者处理复杂交互场景时非常...
easyui iframe 页面重复加载的问题
01-24
而当用户点击切换tab时，我们通过JavaScript动态地为选中标签的iframe设置正确的src属性值，从而实现按需加载。 具体来说，可以使用jQuery配合easyui的API来实现。首先在页面加载完成事件中，遍历所有的iframe，将...
dcat-iframe-tab:在dcat-admin中使用iframe作为页面架构并发布标签页使页面切换无需刷新
04-29
dcat-iframe-tab 介绍 这个扩展包基于laravel框架和dcat-admin框架，为解决dcat-admin没有自带兼容iframe架构。使用此扩展包可以构建出一个iframe架构并带有标签页管理的后台框架。 功能 双击关闭标签页 当标签页...
layui点击导航栏刷新tab页的示例代码
10-18
在Layui的tab组件中，若要实现点击导航栏切换tab页时能够刷新内容，可以利用Layui提供的配置选项来实现。具体的方法是通过修改tab组件的配置项中的autoRefresh属性来达到效果。在未修改之前，autoRefresh的默认值为...
HTML 用Table布局商城首页
dxm809的博客
08-22 512
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商城首页</title> </head> <body> <!--1.创建一个八行一列的表格--> <table border="1px" width="1300px" align="center" cellpadding="0px" cellspac.
微信小程序实现分页加载，触底加载下一页，滚动加载
海贼王某人的博客
03-31 3466
这里我就不写wxml了，就是一个列表循环，直接看js代码逻辑，注释都写在代码后面了，这个方法可以实现无限滚动加载，直到加载完最后一条数据，也可以实现触底没数据后，二次触底可以从新加载刷新，学废了就给个三联把，感谢！ data: { orderList: [], pageSize: 10, pageNum: 1, }, /** * 上拉触底 onReachBottom微信自带的触底函数 */ onReachBottom: function () {
tab选项卡跳转，在iframe里面新建选项卡和跳转选项卡
q596333033的博客
11-14 4364
第一种以href链接的方式： [javascript] view plain copy function addTab(title, url){               if ($('#tt').tabs('exists', title)){                   $('#tt').tabs('select', title);    
Tabs 标签页+iframe嵌套页面+Tabs默认展示第一个
cdada_toString的博客
01-05 753
vue代码如下： 嵌套页面效果图如下：
html5 iframe tab,iframe-tabs.html
weixin_39531594的博客
06-16 151
Amaze UI Admin index Examples.pd8 {padding: 0.7rem;}@media only screen and (min-width: 1330px) {.show1 {display: none;}}@media (min-width: 1330px) {.show1 {display: none;}}.am-nav-pills>li+li {marg...
一个iframe,点击每个tab加载相应的页面进来iframe
十年回首，一纸感动!
11-06 1795
&lt;html&gt; &lt;head&gt;     &lt;meta http-equiv="Content-Type" content="text/html; charset=GBK"&gt;     &lt;title&gt;&lt;/title&gt;     &lt;link href="../gstyle/listpage.css"
LayUI之动态选项卡Tab&iframe使用
m0_62604616的博客
07-18 1447
可以看见已经更改了，但是有重复的，所以我们要进行再一次的优化。将官网中任意一种选项卡的代码复制下来，粘贴到你要用的地方。然后我们PermissionDao这个类也进行改动。①、查找layui的选项卡页面布局代码--静态。④重复的tab选项卡不添加，改为选中。只要将openTab方法进行改动即可。③优化UserAction。③、将选项卡名称换成菜单名。①创建实体类User。...
【2】案例：Bootstrap 开发 - navs 左侧菜单，使用iframe 嵌入*.html实现动态切换页面
热门推荐
YYDataV的博客
12-23 1万+
一、效果展示 1、div实现效果 2、iframe实现效果 二、左侧菜单栏样式 菜鸟左侧菜单栏中有5个示例，基本满足了大部分场景需求。 参考文档：Bootstrap5 侧边栏导航(Offcanvas) | 菜鸟教程 我这里采用的是第4个样式，这个样式只展示了左侧菜单栏。 接下来我将实现左侧菜单栏和右侧主界面的联动跳转。 三、菜单栏和右侧主界面的联动跳转 有2中比较常用的实现方式： 1、使用div实现主界面切换 实现思路 动态监听 a 的 click事件；..
tab页面切换iframe页面闪烁
最新发布
06-11
当您在 tab 页之间切换时，如果每个 tab 页都包含一个 `<iframe>`，那么在切换 tab 页时可能会出现 iframe 页面的闪烁问题。这通常是由于浏览器重新加载页面或切换 iframe 时的延迟导致的。为了解决这个问题，您可以尝试使用以下方法： 1. 使用 JavaScript 动态加载 iframe 页面，并且只在切换到包含 iframe 的 tab 页时加载。这种方法可以提高页面的性能和稳定性。 2. 使用 CSS 样式来隐藏 iframe，直到完全加载完成后再显示。例如，您可以将 iframe 包装在一个 `div` 中，然后使用以下样式： ```css .iframe-wrapper { opacity: 0; transition: opacity 0.3s ease-in-out; } .iframe-wrapper.loaded { opacity: 1; } ``` 然后在 iframe 加载完成后，使用 JavaScript 将 `loaded` 类添加到 `div` 上，以显示 iframe。 ```javascript const iframe = document.querySelector('iframe'); const wrapper = iframe.parentNode; iframe.addEventListener('load', function() { wrapper.classList.add('loaded'); }); ``` 这些方法可以帮助您解决在 tab 页之间切换时，iframe 页面的闪烁问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值