内嵌iframe 选项卡,该怎么处理
日期：2014-05-17 浏览次数：20435 次
内嵌iframe 选项卡
我也不知道再说什么，就是想用内嵌的iframe实现选项卡功能.
比如我这左侧有10个链接，要求点一次在本页的iframe打开一个网页，可以同时打开10个页面，通过点击选项卡切换。
初学，先来点简单的，弄三四个链接先研究研究，在这谢了
------解决方案--------------------
<!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冒泡行为;
我也不知道再说什么，就是想用内嵌的iframe实现选项卡功能.
比如我这左侧有10个链接，要求点一次在本页的iframe打开一个网页，可以同时打开10个页面，通过点击选项卡切换。
初学，先来点简单的，弄三四个链接先研究研究，在这谢了
------解决方案--------------------
<!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冒泡行为;
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
