javascript_javascript スキルを使用してタブを動的に追加および削除する方法
この記事の例では、JavaScript でタブ タグを動的に追加および削除する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。
<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を使用しました
title2.gif
この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7405
15
1630
14
1358
52
1268
25
1218
29
小紅書メモを削除する方法
Mar 21, 2024 pm 08:12 PM
小紅書メモを削除するにはどうすればよいですか? メモは小紅書アプリで編集できます。ほとんどのユーザーは小紅書メモの削除方法を知りません。次に、エディターがユーザーに小紅書メモの削除方法に関する写真とテキストを提供します。チュートリアル、興味のあるユーザーが来て、それを受講してください見てください！小紅書使い方チュートリアル 小紅書メモの削除方法 1. まず小紅書アプリを開いてメインページに入り、右下隅の[自分]を選択して特別エリアに入ります; 2. 次に、マイエリアで、表示されているメモページをクリックします下の図で、削除したいメモを選択します; 3. メモページに入り、右上隅の [3 つの点] をクリックします; 4. 最後に、下部に機能バーが展開され、[削除] をクリックして完了します。
.000 が見つかったフォルダーは何ですか? found.000フォルダは削除できますか?
Mar 13, 2024 pm 08:52 PM
コンピュータを日常的に使用していると、「found.000 ファイルが紛失または破損している」というエラー メッセージが表示されることがあります。この found.000 はどのフォルダですか?役に立たなくなったら削除してもらえますか？このファイルを知らない人が非常に多いので、found.000 フォルダーについて詳しく説明しましょう~ 1. found.000 フォルダーとは何ですか? 不正なシャットダウンによりコンピューターが部分的または完全に失われた場合、 を見つけることができます。 「found.000」という名前の特別なフォルダーと、その中に含まれる「.chk」拡張子を持つファイルは、システム パーティション内の指定されたディレクトリにあります。この「フォ」
WeChat でブロックされたり削除されたり、永久に追加できなくなったりする可能性があるというのは本当ですか?
Apr 08, 2024 am 11:41 AM
1. まず、相手を永久にブロックして削除して永久に追加しないのは間違いで、ブロックして削除した後に相手を追加したい場合は、相手の同意だけが必要です。 2. ユーザーが誰かをブロックすると、相手はユーザーにメッセージを送信したり、ユーザーの友達サークルを表示したり、ユーザーと通話したりすることができなくなります。 3. ブロックとは、ユーザーの WeChat 連絡先リストから相手を削除することを意味するものではありません。 4. ユーザーが相手をブロックした後、ユーザーの WeChat 連絡先リストから相手を削除した場合、削除後に回復する方法はありません。 5. ユーザーが相手を再度友達として追加したい場合は、相手が同意してユーザーを再度追加する必要があります。
VirtualBox 固定ディスクをダイナミック ディスクに、またはその逆に変換します
Mar 25, 2024 am 09:36 AM
仮想マシンを作成するときに、ディスクの種類を選択するように求められます。固定ディスクまたはダイナミック ディスクを選択できます。固定ディスクを選択した後でダイナミック ディスクが必要であることに気付いた場合、またはその逆の場合はどうすればよいでしょうか? いいですね!一方をもう一方に変換できます。この記事では、VirtualBox 固定ディスクをダイナミック ディスクに、またはその逆に変換する方法を説明します。ダイナミック ディスクは、最初は小さいサイズですが、仮想マシンにデータを保存するにつれてサイズが大きくなる仮想ハード ディスクです。ダイナミック ディスクは、必要なだけのホスト ストレージ スペースのみを使用するため、ストレージ スペースを節約するのに非常に効率的です。ただし、ディスク容量が増加すると、コンピュータのパフォーマンスがわずかに影響を受ける可能性があります。仮想マシンでは固定ディスクとダイナミック ディスクが一般的に使用されます
Xiaohonshuのリリースを削除するにはどうすればよいですか?削除後に復元するにはどうすればよいですか?
Mar 21, 2024 pm 05:10 PM
人気のソーシャル電子商取引プラットフォームとして、Xiaohongshu は日常生活やショッピング体験を共有するために多くのユーザーを魅了してきました。場合によっては、私たちが誤って不適切なコンテンツを公開してしまうことがありますが、個人的なイメージをより良く維持したり、プラットフォームの規制に準拠したりするために、適時に削除する必要があります。 1.Xiaohongshu リリースを削除するにはどうすればよいですか? 1. Xiaohonshu アカウントにログインし、個人のホームページに入ります。 2. 個人ホームページの下部で、「My Creations」オプションを見つけてクリックして入力します。 3. 「My Creations」ページでは、メモやビデオなどを含む、公開されているすべてのコンテンツを確認できます。 4. 削除する必要があるコンテンツを見つけて、右側の「...」ボタンをクリックします。 5. ポップアップ メニューで、[削除] オプションを選択します。 6. 削除を確認すると、個人ホームページおよび公開ページからコンテンツが削除されます。
Mijia にテレビを追加する方法
Mar 25, 2024 pm 05:00 PM
多くのユーザーは、現代生活において Xiaomi スマート ホーム相互接続の電子エコシステムをますます支持しています。Mijia APP に接続した後、携帯電話で接続されたデバイスを簡単に制御できます。しかし、多くのユーザーはまだ Mijia を追加する方法を知りません。このチュートリアル ガイドでは、困っているすべての人を助けるために、具体的な接続方法と手順を説明します。 1. Mijia APPをダウンロードした後、Xiaomi アカウントを作成またはログインします。 2. 追加方法: 新しいデバイスの電源を入れた後、携帯電話をデバイスに近づけて Xiaomi TV の電源を入れます。通常の状況では、接続プロンプトがポップアップ表示されます。「OK」を選択してデバイスの接続プロセスに入ります。プロンプトが表示されない場合は、スマート ホーム APP に入った後、左下の 1 番目のボタンをクリックしてデバイスを手動で追加することもできます。
hiberfil.sys ファイルとは何ですか? hiberfil.sysは削除できますか?
Mar 15, 2024 am 09:49 AM
最近、多くのネチズンが編集者に「hiberfil.sys ファイルとは何ですか?」と尋ねました。 hiberfil.sys は C ドライブのスペースを多く消費し、削除される可能性がありますか?エディターは、hiberfil.sys ファイルを削除できることを通知します。以下で詳細を見てみましょう。 hiberfil.sys は Windows システムの隠しファイルであり、システム休止状態ファイルでもあります。通常、C ドライブのルート ディレクトリに保存され、そのサイズはシステムに搭載されているメモリのサイズと同等です。このファイルはコンピュータが休止状態になっているときに使用され、リカバリ中に以前の状態にすばやく復元できるように、現在のシステムのメモリ データが含まれています。そのサイズはメモリ容量と等しいため、より多くのハードドライブスペースを占有する可能性があります。冬休み
TikTokのチャット履歴を完全に削除する方法
May 07, 2024 am 11:14 AM
1. Douyin アプリを開き、インターフェイスの下部にある [メッセージ] をクリックし、削除する必要があるチャット会話エントリをクリックします。 2. 任意のチャット記録を長押しし、[複数選択]をクリックし、削除したいチャット記録にチェックを入れます。 3. 右下隅の [削除] ボタンをクリックし、ポップアップ ウィンドウで [削除の確認] を選択して、これらのレコードを完全に削除します。
