JavaScript は配列を使用してタブ メニュー切り替えのエフェクト_ナビゲーション メニューを実装します

最近、web2.0 の製品と考えられるタブ メニューを作成しました。これには技術的な内容はなく、単なる練習用です。

以下はタブ メニューの HTML 構造です。 >:

vhc dsdfd....................................

tab1 と tab2 はコンテンツ、空白は tab タグに対応するコンテンツです。 🎜>

以下は JavaScript コード
:

コードをコピー コードは次のとおりです:

sx.activex.tabmenu={

create:function(t){
var a=document.createElement("div");
var head=document.createElement( "div");
var body=document.createElement("div");
a.style.height="200px"; >a.style.width="300px";
/ /a.style.border="1px 赤ベタ";
head.style.height="15%"; .overflow="hidden";
head.style.width=100-20*t.length "%"; "100%";
blank.style.borderBottom=" 1px 赤ベタ";
blank.style.lineHeight=parseInt(a.style.height)*0.15 "px";; =t[0][1];
body.style.height="85%";
body.style.border="1px 赤ベタ"; ;
body.style.borderTop="0px";
for(var i=0;ivar tab=document.createElement("span"); >tab.style.border="1px 赤ベタ";
tab.style.width="20%";
tab.style.lineHeight=parseInt(a.style.height)*0.15 "px";
tab.style.textAlign="center";
tab.style.height="100%";
tab.style.backgroundColor=" yellow"; hand";
tab.innerHTML=t[i][ 0];
tab.onclick=function(r){
return function(){
for(var i1 in head.all) {
if(head.all[i1]!=this && head.all[i1].tagName=="SPAN")
head.all[i1].style.borderBottom="1px 赤ベタ";
this.style.borderBottom="0px";

}
body.innerHTML=t[r][1]
}
; head.appendChild(tab);;
} head.firstChild.style.borderBottom="0px";
a.appendChild(head); a.appendChild(body);
return a;
}
}


渡されるパラメータ t は、ラベルのタイトルとラベルの内容を含みます。呼び出しメソッドは次のとおりです:




コードをコピーします


コードは次のとおりです:


< ;html>

kongjian.js">

var a=sx.activex.tabmenu.create([["asd","wewfrwefwe"],["we" ,"dsfsdfsdf"]]);






もうすぐ完成します。興味のある友達はテストしてみてください。