望高人指点！（急）动态添加多个iframe实现选项卡功能，类Firefox浏览器的打开多个页面。。。。

如题：动态添加多个iframe实现选项卡功能，类Firefox浏览器的打开多个页面。也就是每个选项卡里的iframe都嵌入一个aspx页面，不同的选项卡里可以不同的操作，切换时不影响。但是下面的代码（见附件）是一个iframe，切换时控制地址，使得页面重新加载。效果就跟浏览器打开的多个页面一样。那位高手做过类似的例子，帮帮我的，急用，或是修改下面代码（见附件）。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

楼主就找简单的选项卡demo，之后把每个div里面写上你的iframe即可了！
关键是要动态添加iframe，动态关闭。
谢谢你。
看了下代码，现在好象实现的是动态地改变iframe的src属性，从而达到变换页面的效果，这样会重新加载页面在动态添加页签的时候，可以增加一个新的div,里面放iframe，把原先的div隐藏掉
在变换页签的时候，去控制div的显示与隐藏
这样就不会从新加载
同意4L，添加iframe，用时显示，不用时隐藏
还有个问题，一个页面多个iframe影响加载速度怎么办？
EXTJS 好像就有这个功能哦
根据你的要求帮你改了一个效果请查看 http://www.tsolong.com/post/589.html源代码如下:
<!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");//顶部菜单
var ck=$("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");//左侧菜单
var j;

//点击左侧菜单增加新标签
for(i=0;i<ck.length;i++)
{
ck[i].onclick=function()
{
$("welcome").style.display="none"//欢迎内容隐藏
clearMenu();
this.style.background="yellow";
//循环取得当前索引
for(j=0;j<8;j++)
{
if(this==ck[j])
{
if($("p"+j)==null)
{
openNew(j,this.innerHTML);//设置标签显示文字
}
clearStyle();
$("p"+j).style.backgroundColor="yellow";
clearContent();
$("c"+j).style.display="block";
$("c"+j).setAttribute("src", this.getAttribute("url"));
}
}

return false;
}
}

//增加或删除标签
function openNew(id,name)
{

var tagMenu=document.createElement("li");
tagMenu.id="p"+id;
tagMenu.innerHTML=name+"   "+"<img src='close.gif' style='vertical-align:middle'/>";
//标签点击事件
tagMenu.onclick=function(evt)
{
clearMenu();
ck[id].style.background="yellow";
clearStyle();
tagMenu.style.backgroundColor="yellow";
clearContent();
$("c"+id).style.display="block";
}

//标签内关闭图片点击事件
tagMenu.getElementsByTagName("img")[0].onclick=function(evt)
{
evt=(evt)?evt:((window.event)?window.event:null);
if(evt.stopPropagation){evt.stopPropagation()} //取消opera和Safari冒泡行为;

this.parentNode.parentNode.removeChild(tagMenu);//删除当前标签
var color=tagMenu.style.backgroundColor;
//设置如果关闭一个标签时，让最后一个标签得到焦点

if(color=="#ffff00"||color=="yellow")
{
//区别浏览器对颜色解释
if(tags.length-1>=0)
{
clearStyle();
tags[tags.length-1].style.backgroundColor="yellow";
clearContent();
var cc=tags[tags.length-1].id.split("p");
$("c"+cc[1]).style.display="block";
clearMenu();
ck[cc[1]].style.background="yellow";
}
else
{
clearContent();
clearMenu();
$("welcome").style.display="block"
}
}
}
menu.appendChild(tagMenu);

}
//清除菜单样式
function clearMenu()
{
for(i=0;i<ck.length;i++)
{
ck[i].style.background="#99CC00";
}
}
//清除标签样式
function clearStyle()
{
for(i=0;i<tags.length;i++)
{
menu.getElementsByTagName("li")[i].style.backgroundColor="#FFCC00";
}
}
//清除内容
function clearContent()
{
for(i=0;i<document.getElementById("content").getElementsByTagName("iframe").length;i++)
{
$("c"+i).style.display="none";
}
}
}
</script>
</head>
<body><div id="top"> <h2>选项卡</h2>
<div id="topTags">
<ul></ul>
</div>

</div><div id="main"> <div id="leftMenu">
<ul>
<li url="http://www.tsolong.com/">TsoLong Blog</li>
            <li url="http://www.johnnyho.cn/">Johnnyho Blog</li>
            <li url="http://www.g.cn/">谷歌</li>
</ul>
</div>

<div id="content">
<div id="welcome" class="content" style="display:block;">
<div align="center">
<p> </p>
<p><strong>选项卡！</strong></p>
<p> </p>
</div>
</div>

<iframe id="c0" class="content"></iframe>
        <iframe id="c1" class="content"></iframe>
        <iframe id="c2" class="content"></iframe>

</div>

</div></body>
</html>
自行车vsf阿士大夫倒萨阿士大夫

望高人指点！（急） 动态添加多个iframe实现选项卡功能，类Firefox浏览器的打开多个页面。。。。

解决方案 »

望高人指点！（急）动态添加多个iframe实现选项卡功能，类Firefox浏览器的打开多个页面。。。。