本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
