内嵌iframe 选项卡

我也不知道再说什么，就是想用内嵌的iframe实现选项卡功能.
比如我这左侧有10个链接，要求点一次在本页的iframe打开一个网页，可以同时打开10个页面，通过点击选项卡切换。
初学，先来点简单的，弄三四个链接先研究研究，在这谢了

解决方案 »

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

<!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>
放在div中，写就可以了，比如
<a href="javascript:void(0);" onclick="openTab('url1')" >链接1</a>.
<a href="javascript:void(0);" onclick="openTab('url2')" >链接2</a>
<a href="javascript:void(0);" onclick="openTab('url3')" >链接3</a>
...<div id="content"></div><script>
function openTab(url) {
    var div = $("#content").append("<div class='tab'><iframe src=' + url + '></div>");
}
</script>上面的代码不完全对凑合这看吧。
擦，这么错。function openTab(url) {
    $("#content").append("<div class='tab'><iframe src=' + url + '></div>");
}