本文实例讲述了javascript动态添加删除tabs标签的方法。分享给大家供大家参考。具体实现方法如下：
<html> <HEAD> <TITLE>网页对话</TITLE> <LINK href="style.css" type=text/css rel=stylesheet> <script> function $(obj) { var o = typeof(obj)=="object" ? obj : document.getElementById(obj); return o; } function addChannel(ChannelId,LabelText){ var ChatBoardId="ChatBoard__"+ChannelId; var LabelId="Label__"+ChannelId; /* 如果频道已存在 **/if($(ChatBoardId)){ return ;bai }; /* 添加控件,先删除原来 '等待客户连接' 这列 **/ var cell0=$("LabelContainer").childNodes[0]; if(cell0.id=='Label_Default')$("LabelContainer").removeChild(cell0); $("ChatBoardContainer").appendChild(buildChatBoard(ChatBoardId)); $("LabelContainer").appendChild(buildLabel(LabelId,LabelText)); /* 显示新打开的聊天窗口 **/toggChatBoard(ChannelId); }; function buildChatBoard(boardId){ var div=document.createElement("DIV"); div.id=boardId; div.style.width="100%"; div.style.height='258px'; /* div.style.border = '1px solid #ff0000'; **/ div.style.overflowY="scroll"; div.style.padding="3"; return div; }; function buildLabel(LabelId,LabelText){ var label=document.createElement("TD"); label.id=LabelId; label.noWrap=true; /* label.width = LabelText.length * 12 + 30; /* +20是为了岂有此留位置给关闭按钮 **/ label.height=22; label.name=LabelText; label.title="点击这里切换交谈对象"; label.innerHTML=LabelText; var lid=LabelId.substr(LabelId.indexOf("__")+2); label.innerHTML+=" <SPAN title='关闭' onclick=/"removeChatBoard('"+lid+"')/" onmouseout='this.style.color=/"#ffffff/"' onmouseover='this.style.color=/"#ffff00/"'>r</SPAN>"; label.style.cursor="hand"; /* label.style.border = "1px solid #CC99FF"; **/ label.style.textAlign="center"; label.style.padding="2"; label.style.backgroundImage="url(Images/title2.gif)"; label.onclick=function (){ var id=event.srcElement.id; id=id.split("__")[1]; if(event.srcElement.tagName=='SPAN')return ; toggChatBoard(id); }; label.onmouseover=function (){ event.srcElement.oldbg=event.srcElement.style.backgroundImage; event.srcElement.style.backgroundImage="url(Images/title2_on_green.jpg)"; }; label.onmouseout=function (){ event.srcElement.style.backgroundImage=event.srcElement.oldbg; }; return label; }; function toggChatBoard(id){ var boards=$("ChatBoardContainer"); for(i=0;i<boards.childNodes.length;i++){ if(boards.childNodes[i].id.indexOf(id)>-1){ boards.childNodes[i].style.display=''; boards.childNodes[i].innerHTML=id; }else { boards.childNodes[i].style.display='none'; }; }; /* 标签栏 **/var labels=$("LabelContainer"); for(i=0;i<labels.childNodes.length;i++){ if(labels.childNodes[i].id.indexOf(id)>-1){ labels.childNodes[i].oldbg=labels.childNodes[i].style.backgroundImage; labels.childNodes[i].style.backgroundImage="url(Images/title2_on_green.jpg)"; var id=labels.childNodes[i].id; id=id.substr(id.indexOf("__")+2); var name=labels.childNodes[i].name; }else { labels.childNodes[i].style.backgroundImage="url(Images/title2.gif)"; }; }; }; function removeChatBoard(id){ var arChannel=$("ChatBoardContainer").childNodes; for(i=0;i<arChannel.length;i++){ /* alert(arChannel[i].id + "," + id); */if(arChannel[i].id.indexOf(id)>-1){ $("ChatBoardContainer").removeChild(arChannel[i]); }; }; /* 标签栏 **/var arLabel=$("LabelContainer").childNodes; for(i=0;i<arLabel.length;i++){ /* alert(arLabel[i].id + "," + id); */if(arLabel[i].id.indexOf(id)>-1){ $("LabelContainer").removeChild(arLabel[i]); }; }; if($("ChatBoardContainer").childNodes.length<1){ var td=document.createElement("TD"); td.innerText="等待客户连接.."; td.align="center"; td.id='Label_Default'; $("LabelContainer").appendChild(td); return ; }; var newid=arChannel[0].id; newid=newid.split("__")[1]; toggChatBoard(newid); }; function scrollLable(action){ if(action==-1){ clearInterval(scrollLableTimer); return ; }; scrollLableTimer=setInterval("doScrollLable("+action+")",30); }; function doScrollLable(action){ var divLabelContainer=$('divLabelContainer'); if(action==1){ if(divLabelContainer.scrollLeft<0){ clearInterval(scrollLableTimer); divLabelContainer.scrollLeft=0; return ; }; divLabelContainer.scrollLeft-=10; }; if(action==2){ if(divLabelContainer.scrollLeft>$('tbLabelContainer').clientWidth){ clearInterval(scrollLableTimer); divLabelContainer.scrollLeft=$('tbLabelContainer').clientWidth; return ; }; divLabelContainer.scrollLeft+=10; }; }; </script> <STYLE type=text/css> .imgbtn{ border:1px solid #ffffff;cursor:hand;} .imgbtn_on{ border:1px solid #9326FF;} a.toolButton{ color:#375FB9!important; padding:0px; border:1px solid #B1D6F3; text-align:center; height:16px; width:16px; } a.toolButton:hover{ background:#BADBEF; border:1px solid #144985; } </STYLE> </HEAD> <body> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <a href="javascript:void(0)">add tabs</a> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD id=ChatBoardTitle background=Images/title2.gif height=27> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD> <DIV id=divLabelContainer> <TABLE id=tbLabelContainer height=27 cellSpacing=1 cellPadding=3 border=0> <TBODY> <TR id=LabelContainer> <TD id=Label_Default noWrap align=middle>等待客户连接...</TD></TR></TBODY></TABLE></DIV></TD> <TD width=30><SPAN onmouseup=scrollLable(-1) onmousedown=scrollLable(1) onMouseOver="this.style.color='red'" onMouseOut="this.style.color=''">7</SPAN><SPAN onmouseup=scrollLable(-1) onmousedown=scrollLable(2) onMouseOver="this.style.color='red'" onMouseOut="this.style.color=''">8</SPAN></TD></TR></TBODY></TABLE></TD></TR> <TR><><> <TD id=ChatBoardContainer vAlign=top></TD></TR></TBODY></TABLE> </body> </html>
用到的图片title2_on_green.jpg
<img alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/jiedushi/title2_on_green.jpg">
title2.gif<img alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/jiedushi/title2.gif">
希望本文所述对大家的javascript程序设计有所帮助。
【javascript动态添加删除tabs标签的方法】相关文章：
★ JavaScript通过Date-Mask将日期转换成字符串的方法
★ JavaScript基于setTimeout实现计数的方法