当前位置: 代码迷 >> Web前端 >> 一个iframe,点击每个tab加载呼应的页面进来iframe
  详细解决方案

一个iframe,点击每个tab加载呼应的页面进来iframe

热度:275   发布时间:2013-11-12 12:10:37.0
一个iframe,点击每个tab加载相应的页面进来iframe
<html>
<head>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=GBK">
????<title></title>
????<link?href="../gstyle/listpage.css"?rel="stylesheet"?type="text/css"?/>
????<link?href="../gstyle/easyui.css"?rel="stylesheet"?type="text/css"?/>
????<script?type="text/javascript"?src="../javascript/jquery-1.4.4.min.js"></script>
????<script?type="text/javascript"?src="../javascript/jquery.easyui.min.js"></script>
????<script?type="text/javascript"?src="../javascript/easyui-lang-zh_CN.js"></script>
????<script?type="text/javascript">
????????$(function?()?{
????????????//设置自适应高度
????????????$('#tt').height(window.document.documentElement.scrollHeight-40);
????????????$('#tt').tabs({
????????????????onSelect:?function?(title)?{
????????????????????loadHtmlFile(title);
????????????????}
????????????});
????????});
?
????????function?loadHtmlFile(title)?{
????????????switch?(title)?{
????????????????case?"A":
????????????????????{
????????????????????????$("#A").attr("src",?"A_Tab.htm");
????????????????????????break;
????????????????????}
????????????????case?"B":
????????????????????{
????????????????????????$("#B").attr("src",?"B_Tab.htm");
????????????????????????break;
????????????????????}
????????????????case?"C":
????????????????????{
????????????????????????$("#C").attr("src",?"C_Tab.htm");
????????????????????????break;
????????????????????}
????????????????case?"D":
????????????????????{
????????????????????????$("#D").attr("src",?"D_Tab.htm");
????????????????????????break;
????????????????????}
????????????????case?"E":
????????????????????{
????????????????????????$("#E").attr("src",?"E_Tab.htm");
????????????????????????break;
????????????????????}
????????????????case?"F":
????????????????????{
????????????????????????$("#F").attr("src",?"F_Tab.htm");
????????????????????????break;
????????????????????}
????????????}
????????}
?
????????$(window).resize(function?()?{
????????????resizeTabs();
????????});
????????function?resizeTabs()?{
????????????$('#tt').tabs('resize');
????????}
????</script>
</head>
<body>
????<div?class="bodyDiv">
????<div?id="tt"?class="pagetabs">
????????<div?title="A"?style="overflow:?auto;?padding:?0px;">
????????????<iframe?id="A"?src=""?frameborder="0"?style="width:?100%;?height:?100%"></iframe>
????????</div>
????????<div?title="B"?style="overflow:?auto;?padding:?0px;">?
????????????<iframe?id="B"?frameborder="0"?src=""?style="width:?100%;?height:?100%;"></iframe>
????????</div>
????????<div?title="C"?style="overflow:?auto;?padding:?0px;">
????????????<iframe?id="C"?src=""?frameborder="0"?style="width:?100%;?height:?100%"></iframe>
????????</div>
????????<div?title="D"?style="overflow:?auto;?padding:?0px;">
????????????<iframe?id="D"?src=""?frameborder="0"?style="width:?100%;?height:?100%"></iframe>
????????</div>
????????<div?title="E"?style="overflow:?auto;?padding:?0px;">
????????????<iframe?id="E"?src=""?frameborder="0"?style="width:?100%;?height:?100%"></iframe>
????????</div>
????????<div?title="F"?style="overflow:?auto;?padding:?0px;">
????????????<iframe?id="F"?src=""?frameborder="0"?style="width:?100%;?height:?100%"></iframe>
????????</div>
????</div>
????</div>
</body>
</html>
  相关解决方案