将六个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
取消
评论