dw 三个 html 合,有6张html文件(用Dreamweaver做的表格),怎么把这6张合成1张html文件,然后打开这张文件...

该博客展示了如何使用纯JavaScript创建一个选项卡式框架,将六个HTML文件(1.html到6.html)集成到页面中。通过点击选项卡,可以切换显示不同的HTML内容。示例代码包括HTML结构、CSS样式和JavaScript逻辑,用于切换选项卡的选中状态和显示隐藏的iframe内容。
摘要由CSDN通过智能技术生成

将六个html文件放到框架里面显示,如下六张html文件姑且看成1.html、2.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=utf-8 /

title纯JS网页TAB选项卡/title

script type=text/javascript

function $(id){

return document.getElementById(id);

}

window.οnlοad=function(){

var tabs = $(menus-tab),

lis = tabs.getElementsByTagName(li),

content = $(content),

divs = content.getElementsByTagName(div),

clearAllClass = function(arr,name){

var lens = arr.length,re = new RegExp(name,'gi');

for(var j = 0;jlens;j++){

if(re.test(arr[j].className)){

arr[j].className = arr[j].className.replace(re,'');

}

}

return arr;

},

addClass = function(o,name){

var re = new RegExp(name,'gi');

if (!re.test(o.className)) o.className += +name;

return o;

};

for(var i=0 ,len=lis.length;ilen;i++){

~function(a){

lis[a].onclick = function(){

addClass(clearAllClass(lis,'on')[a],'on');

addClass(clearAllClass(divs,'show')[a],'show');

}

}(i);

}

}

/script

style type=text/css

*{margin:0;padding:0;}

body{font:12px Verdana, Arial, Helvetica, sans-serif;}

ul{list-style:none;}

#tab{margin:20px auto;padding:10px;width:850px;border:1px solid #ccc;}

#tab ul{overflow:hidden;zoom:1;}

#tab li{float:left;margin-right:8px;width:100px;height:18px;line-height:18px;border:1px solid red;border-bottom:0;cursor:pointer;text-align:center;}

#tab li.on{background:#fc0; color:000;}

#content{border:1px solid #666;}

#content div{padding:10px;display:none;}

#content div.show{display:block;}

/style

/head

body

div id=tab

ul id=menus-tab

li class=ontab1/li

litab2/li

litab3/li

litab4/li

litab5/li

litab6/li

/ul

div id=content

div class=show iframe frameborder='0' id='FrameRight1' name='FrameRight' scrolling='yes' src=1.html

style=height: 100%; width: 100%; overflow: visible/iframe/div

diviframe frameborder='0' id='FrameRight2' name='FrameRight' scrolling='yes' src=2.html

style=height: 100%; width: 100%; overflow: visible/iframe/div

diviframe frameborder='0' id='FrameRight3' name='FrameRight' scrolling='yes' src=3.html

style=height: 100%; width: 100%; overflow: visible/iframe/div

diviframe frameborder='0' id='FrameRight4' name='FrameRight' scrolling='yes' src=4.html

style=height: 100%; width: 100%; overflow: visible/iframe/div

diviframe frameborder='0' id='FrameRight5' name='FrameRight' scrolling='yes' src=5.html

style=height: 100%; width: 100%; overflow: visible/iframe/div

diviframe frameborder='0' id='FrameRight6' name='FrameRight' scrolling='yes' src=6.html

style=height: 100%; width: 100%; overflow: visible/iframe/div

/div

/div

/body

/html

取消

评论

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值