内嵌iframe 选项卡

j466237266 2012-07-26 02:27:12

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

...全文

231 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

j466237266 2012-07-30

打赏
举报

就这么沉啦

j466237266 2012-07-26

打赏
举报

再顶一个，来高手啊

j466237266 2012-07-26

打赏
举报

。。。。
大哥们，我菜鸟一个，希望尽量详细点

失落的code 2012-07-26

打赏
举报

[Quote=引用 4 楼的回复:]

放在div中，写就可以了，比如
HTML code

<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=……
[/Quote]
擦，这么错。



function openTab(url) {

    $("#content").append("<div class='tab'><iframe src=' + url + '></div>");

}

失落的code 2012-07-26

打赏
举报

放在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>

上面的代码不完全对。。。凑合这看吧。

j466237266 2012-07-26

打赏
举报

大哥，没可读性啊

夏小安Lily 2012-07-26

打赏
举报

<!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>

j466237266 2012-07-26