望高人指点！（急） 动态添加多个iframe实现选项卡功能，类Firefox浏览器的打开多个页面。该如何处理
日期：2014-05-16 浏览次数：20422 次
望高人指点！（急） 动态添加多个iframe实现选项卡功能，类Firefox浏览器的打开多个页面。。。。
如题：动态添加多个iframe实现选项卡功能，类Firefox浏览器的打开多个页面。。。。
也就是每个选项卡里的iframe都嵌入一个aspx页面，不同的选项卡里可以不同的操作，切换时不影响。但是下面的代码（见附件）是一个iframe，切换时控制地址，使得页面重新加载。 效果就跟浏览器打开的多个页面一样。
那位高手做过类似的例子，帮帮我的，急用，或是修改下面代码（见附件）。
------解决方案--------------------
楼主就找简单的选项卡demo，之后把每个div里面写上你的iframe即可了！
------解决方案--------------------
看了下代码，现在好象实现的是动态地改变iframe的src属性，从而达到变换页面的效果，这样会重新加载页面
在动态添加页签的时候，可以增加一个新的div,里面放iframe，把原先的div隐藏掉
在变换页签的时候，去控制div的显示与隐藏
这样就不会从新加载
------解决方案--------------------
------解决方案--------------------
根据你的要求帮你改了一个
效果请查看 http://www.tsolong.com/post/589.html
源代码如下:
如题：动态添加多个iframe实现选项卡功能，类Firefox浏览器的打开多个页面。。。。
也就是每个选项卡里的iframe都嵌入一个aspx页面，不同的选项卡里可以不同的操作，切换时不影响。但是下面的代码（见附件）是一个iframe，切换时控制地址，使得页面重新加载。 效果就跟浏览器打开的多个页面一样。
那位高手做过类似的例子，帮帮我的，急用，或是修改下面代码（见附件）。
------解决方案--------------------
楼主就找简单的选项卡demo，之后把每个div里面写上你的iframe即可了！
------解决方案--------------------
看了下代码，现在好象实现的是动态地改变iframe的src属性，从而达到变换页面的效果，这样会重新加载页面
在动态添加页签的时候，可以增加一个新的div,里面放iframe，把原先的div隐藏掉
在变换页签的时候，去控制div的显示与隐藏
这样就不会从新加载
------解决方案--------------------
------解决方案--------------------
根据你的要求帮你改了一个
效果请查看 http://www.tsolong.com/post/589.html
源代码如下:
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选项卡 </title>
<style type="text/css">
body
{
font-size:12px;
}
ul,li,h2
{
margin:0;padding:0;
}
ul
{
list-style:none;
}
#top
{
width:900px;
height:40px;
margin:0 auto;
background-color:#CCCC00
}
#top h2
{
width:150px;
height:40px;
background-color:#99CC00;
float:left;
font-size:14px;
text-align:center;
line-height:40px;
}
#topTags
{
width:750px;
height:40px;
margin:0 auto;
background-color:#CCCC00;
float:left
}
#topTags ul li
{
float:left;
width:150px;
height:25px;
margin-right:5px;
display:block;
text-align:center;
cursor:pointer;
padding-top:15px;
}
#main
{
width:900px;
height:500px;
margin:0 auto;
background-color:#F5F7E6;
}
#leftMenu
{
width:150px;
height:500px;
background-color:#009900;
float:left}
#leftMenu ul
{
margin:10px;
}
#leftMenu ul li
{
width:130px;
height:30px;display:block;
background:#99CC00;
cursor:pointer;
line-height:30px;
text-align:center;
margin-bottom:5px;
}
#leftMenu ul li a
{
color:#000000;
text-decoration:none;
}
#content
{
width:750px;
height:500px;
float:left
}
.content
{
width:740px;
height:490px;
display:none;
padding:5px;
overflow-y:auto;
line-height:30px;
}
#footer
{
width:900px;
height:30px;
margin:0 auto;
background-color:#ccc;
line-height:30px;
text-align:center;
}
.content1
{
width:740px;
height:490px;
display:block;
padding:5px;
overflow-y:auto;
line-height:30px;
border:1px solid red;
}
</style>
<script type="text/javascript">
window.onload=function()
{
function $(id)
{
return document.getElementById(id)
}
var menu=$("topTags").getElementsByTagName("ul")[0];//顶部菜单容器
var tags=menu.getElementsByTagName("li");//顶部菜单
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
