javascript动态添加删除tabs标签的方法
本文实例讲述了javascript动态添加删除tabs标签的方法。分享给大家供大家参考。具体实现方法如下：
<html>
<HEAD>
<TITLE>网页对话</TITLE>
<LINKhref="style.css"type=text/cssrel=stylesheet>
<script>
function$(obj)
{
varo=typeof(obj)=="object"?obj:document.getElementById(obj);
returno;
}
functionaddChannel(ChannelId,LabelText){
varChatBoardId="ChatBoard__"+ChannelId;
varLabelId="Label__"+ChannelId;
/*如果频道已存在**/if($(ChatBoardId)){
return;bai
};
/*添加控件,先删除原来'等待客户连接'这列**/
varcell0=$("LabelContainer").childNodes[0];
if(cell0.id=='Label_Default')$("LabelContainer").removeChild(cell0);
$("ChatBoardContainer").appendChild(buildChatBoard(ChatBoardId));
$("LabelContainer").appendChild(buildLabel(LabelId,LabelText));
/*显示新打开的聊天窗口**/toggChatBoard(ChannelId);
};
functionbuildChatBoard(boardId){
vardiv=document.createElement("DIV");
div.id=boardId;
div.style.width="100%";
div.style.height='258px';
/*div.style.border='1pxsolid#ff0000';**/
div.style.overflowY="scroll";
div.style.padding="3";
returndiv;
};
functionbuildLabel(LabelId,LabelText){
varlabel=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;
varlid=LabelId.substr(LabelId.indexOf("__")+2);
label.innerHTML+="<SPANtitle='关闭'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="1pxsolid#CC99FF";**/
label.style.textAlign="center";
label.style.padding="2";
label.style.backgroundImage="url(Images/title2.gif)";
label.onclick=function(){
varid=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;
};
returnlabel;
};
functiontoggChatBoard(id){
varboards=$("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';
};
};
/*标签栏**/varlabels=$("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)";
varid=labels.childNodes[i].id;
id=id.substr(id.indexOf("__")+2);
varname=labels.childNodes[i].name;
}else{
labels.childNodes[i].style.backgroundImage="url(Images/title2.gif)";
};
};
};
functionremoveChatBoard(id){
vararChannel=$("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]);
};
};
/*标签栏**/vararLabel=$("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){
vartd=document.createElement("TD");
td.innerText="等待客户连接..";
td.align="center";
td.id='Label_Default';
$("LabelContainer").appendChild(td);
return;
};
varnewid=arChannel[0].id;
newid=newid.split("__")[1];
toggChatBoard(newid);
};
functionscrollLable(action){
if(action==-1){
clearInterval(scrollLableTimer);
return;
};
scrollLableTimer=setInterval("doScrollLable("+action+")",30);
};
functiondoScrollLable(action){
vardivLabelContainer=$('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>
<STYLEtype=text/css>
.imgbtn{border:1pxsolid#ffffff;cursor:hand;}
.imgbtn_on{border:1pxsolid#9326FF;}
a.toolButton{
color:#375FB9!important;
padding:0px;
border:1pxsolid#B1D6F3;
text-align:center;
height:16px;
width:16px;
}
a.toolButton:hover{
background:#BADBEF;
border:1pxsolid#144985;
}
</STYLE>
</HEAD>
<body>
<ahref="javascript:void(0)"onClick="addChannel('ceshi','ceshi')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test1','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test2','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test3','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test4','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test5','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test6','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test7','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test8','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test9','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test10','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test11','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test12','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test13','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test14','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test15','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test16','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test17','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test18','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test19','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test20','test')">addtabs</a>
<ahref="javascript:void(0)"onClick="addChannel('test21','test')">addtabs</a>
<TABLEcellSpacing=0cellPadding=0width="100%"border=0>
<TBODY>
<TR>
<TDid=ChatBoardTitlestyle="COLOR:#555555"background=Images/title2.gifheight=27>
<TABLEstyle="TABLE-LAYOUT:fixed"cellSpacing=0cellPadding=0width="100%"border=0>
<TBODY>
<TR>
<TD>
<DIVid=divLabelContainerstyle="OVERFLOW-X:hidden;WIDTH:100%">
<TABLEid=tbLabelContainerheight=27cellSpacing=1cellPadding=3border=0>
<TBODY>
<TRid=LabelContainer>
<TDid=Label_DefaultnoWrapalign=middle>等待客户连接...</TD></TR></TBODY></TABLE></DIV></TD>
<TDwidth=30><SPANonmouseup=scrollLable(-1)onmousedown=scrollLable(1)onMouseOver="this.style.color='red'"style="CURSOR:hand;FONT-FAMILY:webdings"onMouseOut="this.style.color=''">7</SPAN><SPANonmouseup=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内不能放任何内容，否则脚本会出错--><!--<divid="ChatBoard"style="padding:3px;overflow-y:scroll;width:100%;height:258px"></div>-->
<TDid=ChatBoardContainerstyle="HEIGHT:258px"vAlign=top></TD></TR></TBODY></TABLE>
</body>
</html>
用到的图片title2_on_green.jpg
<imgalt=""src="http://p.blog.csdn.net/images/p_blog_csdn_net/jiedushi/title2_on_green.jpg">
title2.gif<imgalt=""src="http://p.blog.csdn.net/images/p_blog_csdn_net/jiedushi/title2.gif">
希望本文所述对大家的javascript程序设计有所帮助。