<html>
<head>
<script>
//功能:实现tab框效果,能打开tab框,关闭tab框。
//...能防止重复打开,可以点击切换tab框,
//...各tab框对应有个iframe,加载内容运行独立
//...关闭tab框时显示剩余选项卡,焦点窗口不关闭
//...封装为类,在一个页面内多个tab框操作互不影响。
//...防止创建和删除tab选项卡的iframe,ie内存不释放问题。
//...兼容ie,firefox的问题。div的float,阻止firefox的事件冒泡等。
//参数:tabs框对应的div的id,head div的id ,body div的id
//...本类要对这3个div进行操作。
//...createdtab时,div的选项卡id不能以数字开头
function tabs(tid,thid,tbid)
{
var _tid,_thid,_tbid; //本类要操作的tab div 的id.
_tid=tid;
_thid=thid;
_tbid=tbid;
//alert(_tid);
var _focus_thid; //当前选中的选项卡head div 的id,关闭自己时,需要显示其他选项卡,否则,只关闭。
//在某元素的onclick中如何使用该tabs类的实例对象???
//就是通过这种方式!!!!!
var _othis=this;
//alert(_othis);
//初始化,创建tabs的head中的table,替换div的float排列,兼容ie,firefox不好控制。
var _tmptable=document.createElement('table');
_tmptable.id=thid+'_table';
//_tmptable.width='100%';
_tmptable.style.border='solid 1px green';
var _oth=document.getElementById(_thid);
//alert(_oth);
_oth.appendChild(_tmptable);
var _tmptbody=document.createElement('tbody');
_tmptable.appendChild(_tmptbody);
var _tmprow=document.createElement('tr');
_tmptbody.appendChild(_tmprow);
//根据uid创建某个选项卡,如已创建过,则仅仅定位显示。
//uid好像不能以数字开头
this.createtab=function(uid,title,url)
{
var tabhead_id=uid + '_tab'+ '_head';
var tabbody_id=uid + '_tab' + '_head_body';
if(!this.tab_isloaded(tabhead_id))
{
//创建tab头部分
var tabs_head_container=document.getElementById(_thid);
var _tmptabhead=document.createElement('div');
_tmptabhead.id=tabhead_id;
_tmptabhead.parent=tabs_head_container;
_tmptabhead.innerHTML="<table width='100%'><tr><td width='80%'>"
+ title + "</td><td align='right'><img id='btnclose' src='close.png' /></td></tr></table>";//title;
//alert(_tmptabhead.innerHTML);
//_tmptabhead.style.styleFloat='left'; //js用styleFloat属性,标签用float属性
_tmptabhead.float='left';
_tmptabhead.style.width='100px';
_tmptabhead.style.border='solid 1px yellow';
_tmptabhead.οnclick=function(){
//!!!这里的this代表_tmptabhead对象,即head的div.所以this.id就是uid+_tab_head
//!!!这里的_othis代表本tabs类的实例化对象。否则无法使用本类的函数tab_dispbody
//alert(this.id);
//alert('kkkk');
_othis.tab_dispbody(this.id);
};
//注册close按钮。innerhtml赋值无法调用类函数removetab,必须动态添加事件
var _tmpimgs=_tmptabhead.getElementsByTagName('img');
for(var i=0;i<_tmpimgs.length;i++)
{
if(_tmpimgs[i].id=='btnclose')
{
//alert('注册选项卡关闭事件处理器成功!');
_tmpimgs[i].οnclick=function(){
//alert('oooooo');
_othis.removetab(_tmptabhead.id);
//!!!阻止事件冒泡,否则firefox中还会激发所在div的click事件。导致目标选项卡内容不显示。
cancelBubble();
}
}
}
//添加选项卡到容器中,即div的table中,table为了横向排列,兼容ie,firefox;
var _tmpcellx=document.createElement('td');
_tmpcellx.width='100px';
_tmpcellx.height='20px';
_tmptabhead.parent=_tmpcellx; //删除选项卡时要用,要删除td
_tmpcellx.parent=_tmprow;
_tmpcellx.appendChild(_tmptabhead);
_tmprow.appendChild(_tmpcellx);
//tabs_head_container.appendChild(_tmptabhead);
}
else
{
//alert('kjk');
this.tab_dispbody(tabhead_id);
}
//创建tab内容部分div
if(!this.tab_isloaded(tabbody_id))
{
var tabs_body_container=document.getElementById(_tbid);
var _tmptabbody=document.createElement('div');
_tmptabbody.id=tabbody_id;
_tmptabbody.parent=tabs_body_container;
//创建tab内容部分iframe
var _tmpiframe=document.createElement('iframe');
_tmpiframe.id=_tmptabbody.id+"_iframe";
_tmpiframe.height='80%';
_tmpiframe.width='90%';
_tmpiframe.src=url;//'http://www.baidu.com';
_tmptabbody.appendChild(_tmpiframe);
//!!!注意添加的顺序,先子后总,否则可能释放不掉。
tabs_body_container.appendChild(_tmptabbody);
//隐藏其他的tab内容部分的div
this.tab_dispbody(tabhead_id);
}
else
{
this.tab_dispbody(tabhead_id);
}
}
//事件处理,选择tab头,显示对应的tab内容div
this.tab_dispbody=function(tabhead_id)
{
//tab_headid参数:选中的tab头的div的id
//alert('显示 ' + tabhead_id);
//根据选中tab头的div id,显示对应的body div
//选项卡头div命名:163_tab_head 内容div命名:163_tab_head_body
//............................................................
//选中tab头
var tabs_head=document.getElementById(_thid);
var _tmpth=tabs_head.getElementsByTagName('div');
//alert(_tmpth.length);
for(var i=0;i<_tmpth.length;i++)
{
try
{
//alert(_tmpth[i].id + "," + tabhead_id);
//
if(_tmpth[i].id==tabhead_id)
{
_tmpth[i].style.backgroundColor='red';
//记忆当前选中的选项卡id 关闭时处理用。
_focus_thid=_tmpth[i].id;
}
else
_tmpth[i].style.backgroundColor='white';
}catch(e){}
}
//选中tab头对应的body
var tabs_body=document.getElementById(_tbid);
var _tmptb=tabs_body.getElementsByTagName('div');
//alert('所有tab body div的个数' + _tmptb.length);
for(var i=0;i<_tmptb.length;i++)
{
try
{
//alert(_tmptb[i].id + "," + tabhead_id);
//
if(_tmptb[i].id==(tabhead_id+'_body'))
{
//alert('显示'+_tmptb[i].id );
_tmptb[i].style.display='block';
}
else
{
//alert('关闭显示'+_tmptb[i].id );
_tmptb[i].style.display='none';
}
}catch(e){}
}
}
//关闭选项卡
this.removetab=function(tabhead_id)
{
//alert('remove ' + tabhead_id);
var tabs=document.getElementById(_tid); //!!tabs,不是tab_head
//释放tab body部分iframe占用的资源,必须的,否则ie内存不释放
var _iframes=tabs.getElementsByTagName('iframe');//=document.getElementById(tabhead_id+'_body_iframe');
//alert(iframes.length);
for(var i=0;i<_iframes.length;i++)
{
if(_iframes[i].id==tabhead_id+'_body_iframe')
_iframes[i].src=null;
}
//删除tab选项卡对应的头和body部分的div
//选项卡头div命名:163_tab_head 内容div命名:163_tab_head_body
var _tmpdivs=tabs.getElementsByTagName('div');
//alert(_tmpdivs.length);
for(var i=0;i<_tmpdivs.length;i++)
{
try
{
if(_tmpdivs[i].id.indexOf(tabhead_id)>=0) //头 内容
{
if(_tmpdivs[i].parent.tagName=="TD") //说明是tab头的head div
{
//删除div所在的td. 即tr.removechild(td);
//alert(_tmpdivs[i].parent.parent.tagName);
_tmpdivs[i].parent.parent.removeChild(_tmpdivs[i].parent);
}
else //说明是内容部分的div
{
//alert(_tmpdivs[i].id);
_tmpdivs[i].parent.removeChild(_tmpdivs[i]);
}
}
}catch(e){}
}
//如果删除的是当前焦点选项卡,则显示剩余的选项卡,否则,保持当前,不必显示
if(tabhead_id==_focus_thid)
{
//选中剩余的选项卡中的某一个
var tabs1=document.getElementById(_thid); //从tabs_head中找到头div的某一个即可
var _tmpths=tabs1.getElementsByTagName('div');
//alert(_tmpths.length);
for(var i=0;i<_tmpths.length;i++)
{
try
{
var ilen=_tmpths[i].id.length;
var tmpstr=_tmpths[i].id.substring(ilen-4,ilen);
//alert(tmpstr);
if(tmpstr=="head")
{
//alert('关闭选项卡后,自动选中:' + _tmpths[i].id);
//try catch,防止本句出错,没有执行break,不跳出循环
try{
//newseltabhead=_tmpths[i];
_focus_thid=_tmpths[i].id;
_othis.tab_dispbody(_tmpths[i].id);
}catch(e){}
break;
}
}catch(e){}
}
}
}
//判断tab head或body是否已生成
this.tab_isloaded=function(id)
{
var tabs_container=document.getElementById(_tid);
var _divs=tabs_container.getElementsByTagName('div');
for(var i=0;i<_divs.length;i++)
{
if(_divs[i].id==id)
return true;
}
return false;
}
//得到浏览器事件对象
function getEvent(){
if(window.event) {return window.event;}
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent
|| arg0.constructor==KeyboardEvent)
||(typeof(arg0)=="object" && arg0.preventDefault
&& arg0.stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
//阻止冒泡
function cancelBubble()
{
var e=getEvent();
if(window.event){
//e.returnValue=false;//阻止自身行为
e.cancelBubble=true;//阻止冒泡
}else if(e.preventDefault){
//e.preventDefault();//阻止自身行为
e.stopPropagation();//阻止冒泡
}
}
}
var otabs;
var xtabs;
window.οnlοad=function()
{
otabs=new tabs('tabs','tabs_head','tabs_body');
xtabs=new tabs('aa','aa_head','aa_body');
}
</script>
</head>
<body>
<input type="button" value="百度" οnclick="otabs.createtab('baidu','百度','1.htm');">
<input type="button" value="搜狐" οnclick="otabs.createtab('sohu','搜狐','2.htm');">
<input type="button" value="163" οnclick="otabs.createtab('s163','s163','3.htm');">
<input type="button" value="删除" οnclick="otabs.removetab('baidu_tab_head');">
<input type="button" value="百度" οnclick="xtabs.createtab('baidu','百度','1.htm');">
<input type="button" value="搜狐" οnclick="xtabs.createtab('sohu','搜狐','2.htm');">
<input type="button" value="163" οnclick="xtabs.createtab('s163','s163','3.htm');">
<input type="button" value="删除" οnclick="xtabs.removetab('baidu_tab_head');">
<!--tab选项卡要求div的id必须是下面的,div的层次关系必须按下面格式的来-->
<div id="tabs">
<div id="tabs_head" style='width:800px;height:20px;border:solid 1px red;'>
</div>
<div id="tabs_body"></div>
</div>
<!--tab选项卡要求div的id必须是下面的,div的层次关系必须按下面格式的来-->
<div id="aa">
<div id="aa_head" style='width:800px;height:20px;border:solid 1px red;'>
</div>
<div id="aa_body"></div>
</div>
</body>
</html>
<head>
<script>
//功能:实现tab框效果,能打开tab框,关闭tab框。
//...能防止重复打开,可以点击切换tab框,
//...各tab框对应有个iframe,加载内容运行独立
//...关闭tab框时显示剩余选项卡,焦点窗口不关闭
//...封装为类,在一个页面内多个tab框操作互不影响。
//...防止创建和删除tab选项卡的iframe,ie内存不释放问题。
//...兼容ie,firefox的问题。div的float,阻止firefox的事件冒泡等。
//参数:tabs框对应的div的id,head div的id ,body div的id
//...本类要对这3个div进行操作。
//...createdtab时,div的选项卡id不能以数字开头
function tabs(tid,thid,tbid)
{
var _tid,_thid,_tbid; //本类要操作的tab div 的id.
_tid=tid;
_thid=thid;
_tbid=tbid;
//alert(_tid);
var _focus_thid; //当前选中的选项卡head div 的id,关闭自己时,需要显示其他选项卡,否则,只关闭。
//在某元素的onclick中如何使用该tabs类的实例对象???
//就是通过这种方式!!!!!
var _othis=this;
//alert(_othis);
//初始化,创建tabs的head中的table,替换div的float排列,兼容ie,firefox不好控制。
var _tmptable=document.createElement('table');
_tmptable.id=thid+'_table';
//_tmptable.width='100%';
_tmptable.style.border='solid 1px green';
var _oth=document.getElementById(_thid);
//alert(_oth);
_oth.appendChild(_tmptable);
var _tmptbody=document.createElement('tbody');
_tmptable.appendChild(_tmptbody);
var _tmprow=document.createElement('tr');
_tmptbody.appendChild(_tmprow);
//根据uid创建某个选项卡,如已创建过,则仅仅定位显示。
//uid好像不能以数字开头
this.createtab=function(uid,title,url)
{
var tabhead_id=uid + '_tab'+ '_head';
var tabbody_id=uid + '_tab' + '_head_body';
if(!this.tab_isloaded(tabhead_id))
{
//创建tab头部分
var tabs_head_container=document.getElementById(_thid);
var _tmptabhead=document.createElement('div');
_tmptabhead.id=tabhead_id;
_tmptabhead.parent=tabs_head_container;
_tmptabhead.innerHTML="<table width='100%'><tr><td width='80%'>"
+ title + "</td><td align='right'><img id='btnclose' src='close.png' /></td></tr></table>";//title;
//alert(_tmptabhead.innerHTML);
//_tmptabhead.style.styleFloat='left'; //js用styleFloat属性,标签用float属性
_tmptabhead.float='left';
_tmptabhead.style.width='100px';
_tmptabhead.style.border='solid 1px yellow';
_tmptabhead.οnclick=function(){
//!!!这里的this代表_tmptabhead对象,即head的div.所以this.id就是uid+_tab_head
//!!!这里的_othis代表本tabs类的实例化对象。否则无法使用本类的函数tab_dispbody
//alert(this.id);
//alert('kkkk');
_othis.tab_dispbody(this.id);
};
//注册close按钮。innerhtml赋值无法调用类函数removetab,必须动态添加事件
var _tmpimgs=_tmptabhead.getElementsByTagName('img');
for(var i=0;i<_tmpimgs.length;i++)
{
if(_tmpimgs[i].id=='btnclose')
{
//alert('注册选项卡关闭事件处理器成功!');
_tmpimgs[i].οnclick=function(){
//alert('oooooo');
_othis.removetab(_tmptabhead.id);
//!!!阻止事件冒泡,否则firefox中还会激发所在div的click事件。导致目标选项卡内容不显示。
cancelBubble();
}
}
}
//添加选项卡到容器中,即div的table中,table为了横向排列,兼容ie,firefox;
var _tmpcellx=document.createElement('td');
_tmpcellx.width='100px';
_tmpcellx.height='20px';
_tmptabhead.parent=_tmpcellx; //删除选项卡时要用,要删除td
_tmpcellx.parent=_tmprow;
_tmpcellx.appendChild(_tmptabhead);
_tmprow.appendChild(_tmpcellx);
//tabs_head_container.appendChild(_tmptabhead);
}
else
{
//alert('kjk');
this.tab_dispbody(tabhead_id);
}
//创建tab内容部分div
if(!this.tab_isloaded(tabbody_id))
{
var tabs_body_container=document.getElementById(_tbid);
var _tmptabbody=document.createElement('div');
_tmptabbody.id=tabbody_id;
_tmptabbody.parent=tabs_body_container;
//创建tab内容部分iframe
var _tmpiframe=document.createElement('iframe');
_tmpiframe.id=_tmptabbody.id+"_iframe";
_tmpiframe.height='80%';
_tmpiframe.width='90%';
_tmpiframe.src=url;//'http://www.baidu.com';
_tmptabbody.appendChild(_tmpiframe);
//!!!注意添加的顺序,先子后总,否则可能释放不掉。
tabs_body_container.appendChild(_tmptabbody);
//隐藏其他的tab内容部分的div
this.tab_dispbody(tabhead_id);
}
else
{
this.tab_dispbody(tabhead_id);
}
}
//事件处理,选择tab头,显示对应的tab内容div
this.tab_dispbody=function(tabhead_id)
{
//tab_headid参数:选中的tab头的div的id
//alert('显示 ' + tabhead_id);
//根据选中tab头的div id,显示对应的body div
//选项卡头div命名:163_tab_head 内容div命名:163_tab_head_body
//............................................................
//选中tab头
var tabs_head=document.getElementById(_thid);
var _tmpth=tabs_head.getElementsByTagName('div');
//alert(_tmpth.length);
for(var i=0;i<_tmpth.length;i++)
{
try
{
//alert(_tmpth[i].id + "," + tabhead_id);
//
if(_tmpth[i].id==tabhead_id)
{
_tmpth[i].style.backgroundColor='red';
//记忆当前选中的选项卡id 关闭时处理用。
_focus_thid=_tmpth[i].id;
}
else
_tmpth[i].style.backgroundColor='white';
}catch(e){}
}
//选中tab头对应的body
var tabs_body=document.getElementById(_tbid);
var _tmptb=tabs_body.getElementsByTagName('div');
//alert('所有tab body div的个数' + _tmptb.length);
for(var i=0;i<_tmptb.length;i++)
{
try
{
//alert(_tmptb[i].id + "," + tabhead_id);
//
if(_tmptb[i].id==(tabhead_id+'_body'))
{
//alert('显示'+_tmptb[i].id );
_tmptb[i].style.display='block';
}
else
{
//alert('关闭显示'+_tmptb[i].id );
_tmptb[i].style.display='none';
}
}catch(e){}
}
}
//关闭选项卡
this.removetab=function(tabhead_id)
{
//alert('remove ' + tabhead_id);
var tabs=document.getElementById(_tid); //!!tabs,不是tab_head
//释放tab body部分iframe占用的资源,必须的,否则ie内存不释放
var _iframes=tabs.getElementsByTagName('iframe');//=document.getElementById(tabhead_id+'_body_iframe');
//alert(iframes.length);
for(var i=0;i<_iframes.length;i++)
{
if(_iframes[i].id==tabhead_id+'_body_iframe')
_iframes[i].src=null;
}
//删除tab选项卡对应的头和body部分的div
//选项卡头div命名:163_tab_head 内容div命名:163_tab_head_body
var _tmpdivs=tabs.getElementsByTagName('div');
//alert(_tmpdivs.length);
for(var i=0;i<_tmpdivs.length;i++)
{
try
{
if(_tmpdivs[i].id.indexOf(tabhead_id)>=0) //头 内容
{
if(_tmpdivs[i].parent.tagName=="TD") //说明是tab头的head div
{
//删除div所在的td. 即tr.removechild(td);
//alert(_tmpdivs[i].parent.parent.tagName);
_tmpdivs[i].parent.parent.removeChild(_tmpdivs[i].parent);
}
else //说明是内容部分的div
{
//alert(_tmpdivs[i].id);
_tmpdivs[i].parent.removeChild(_tmpdivs[i]);
}
}
}catch(e){}
}
//如果删除的是当前焦点选项卡,则显示剩余的选项卡,否则,保持当前,不必显示
if(tabhead_id==_focus_thid)
{
//选中剩余的选项卡中的某一个
var tabs1=document.getElementById(_thid); //从tabs_head中找到头div的某一个即可
var _tmpths=tabs1.getElementsByTagName('div');
//alert(_tmpths.length);
for(var i=0;i<_tmpths.length;i++)
{
try
{
var ilen=_tmpths[i].id.length;
var tmpstr=_tmpths[i].id.substring(ilen-4,ilen);
//alert(tmpstr);
if(tmpstr=="head")
{
//alert('关闭选项卡后,自动选中:' + _tmpths[i].id);
//try catch,防止本句出错,没有执行break,不跳出循环
try{
//newseltabhead=_tmpths[i];
_focus_thid=_tmpths[i].id;
_othis.tab_dispbody(_tmpths[i].id);
}catch(e){}
break;
}
}catch(e){}
}
}
}
//判断tab head或body是否已生成
this.tab_isloaded=function(id)
{
var tabs_container=document.getElementById(_tid);
var _divs=tabs_container.getElementsByTagName('div');
for(var i=0;i<_divs.length;i++)
{
if(_divs[i].id==id)
return true;
}
return false;
}
//得到浏览器事件对象
function getEvent(){
if(window.event) {return window.event;}
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent
|| arg0.constructor==KeyboardEvent)
||(typeof(arg0)=="object" && arg0.preventDefault
&& arg0.stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
//阻止冒泡
function cancelBubble()
{
var e=getEvent();
if(window.event){
//e.returnValue=false;//阻止自身行为
e.cancelBubble=true;//阻止冒泡
}else if(e.preventDefault){
//e.preventDefault();//阻止自身行为
e.stopPropagation();//阻止冒泡
}
}
}
var otabs;
var xtabs;
window.οnlοad=function()
{
otabs=new tabs('tabs','tabs_head','tabs_body');
xtabs=new tabs('aa','aa_head','aa_body');
}
</script>
</head>
<body>
<input type="button" value="百度" οnclick="otabs.createtab('baidu','百度','1.htm');">
<input type="button" value="搜狐" οnclick="otabs.createtab('sohu','搜狐','2.htm');">
<input type="button" value="163" οnclick="otabs.createtab('s163','s163','3.htm');">
<input type="button" value="删除" οnclick="otabs.removetab('baidu_tab_head');">
<input type="button" value="百度" οnclick="xtabs.createtab('baidu','百度','1.htm');">
<input type="button" value="搜狐" οnclick="xtabs.createtab('sohu','搜狐','2.htm');">
<input type="button" value="163" οnclick="xtabs.createtab('s163','s163','3.htm');">
<input type="button" value="删除" οnclick="xtabs.removetab('baidu_tab_head');">
<!--tab选项卡要求div的id必须是下面的,div的层次关系必须按下面格式的来-->
<div id="tabs">
<div id="tabs_head" style='width:800px;height:20px;border:solid 1px red;'>
</div>
<div id="tabs_body"></div>
</div>
<!--tab选项卡要求div的id必须是下面的,div的层次关系必须按下面格式的来-->
<div id="aa">
<div id="aa_head" style='width:800px;height:20px;border:solid 1px red;'>
</div>
<div id="aa_body"></div>
</div>
</body>
</html>