望高人指点！（急） 动态添加多个iframe实现选项卡功能，类Firefox浏览器的打开多个页面。。。。
如题：动态添加多个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");//顶部菜单
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>