javascript动态添加删除tabs标签的方法

本文实例讲述了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="关闭" style="FONT-WEIGHT: bold; FONT-SIZE: 12px;FONT-FAMILY: marlett; CURSOR: hand; COLOR: #555555; MARGIN-RIGHT: 4px" 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）" onClick="addChannel（"ceshi","ceshi"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test1","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test2","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test3","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test4","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test5","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test6","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test7","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test8","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test9","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test10","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test11","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test12","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test13","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test14","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test15","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test16","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test17","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test18","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test19","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test20","test"）">add tabs</a><a href="javascript:void（0）" onClick="addChannel（"test21","test"）">add tabs</a><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0><TBODY><TR><TD id=ChatBoardTitle style="COLOR: #555555" background=Images/title2.gif height=27><TABLE style="TABLE-LAYOUT: fixed" cellSpacing=0 cellPadding=0 width="100%" border=0><TBODY><TR><TD><DIV id=divLabelContainer style="OVERFLOW-X: hidden; WIDTH: 100%"><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"" style="CURSOR: hand; FONT-FAMILY: webdings" onMouseOut="this.style.color=""">7</SPAN><SPAN onmouseup=scrollLable（-1） onmousedown=scrollLable（2） onMouseOver="this.style.color="red"" style="CURSOR: hand; FONT-FAMILY: webdings" onMouseOut="this.style.color=""">8</SPAN></TD></TR></TBODY></TABLE></TD></TR><TR><！-- ChatBoardContainer 内不能放任何内容，否则脚本会出错 --><！--<div id="ChatBoard" style="padding:3px; overflow-y: scroll; width: 100%; height: 258px"></div>--><TD id=ChatBoardContainer style="HEIGHT: 258px" 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程序设计有所帮助。