Javascriptユニバーサルシンプルテーブルタブの実装_JavaScriptスキル

ステップ 1: table.js の参照

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

ステップ 2: 選択したスタイル を定義します (例: "active") 「サイドバー」などのタブ ブロックの ID と、最初の「0」などのデフォルトで選択されたシーケンス番号を適用します。
ステップ 3: 関数を呼び出します:

コードをコピーします コードは次のとおりです。

すべてOK です。タブはクリック イベントに応答し、IE および FF として機能します。最適化する時間ができるまで待ちます。結果は次のようになります。


HTML ソース コードは次のとおりです。

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

table.js





コードをコピー


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


/**
* @著者 Sky
*/

var table=function(index,id,active)
{ table=new Table(index,id, active) }
var Table=function; (index,id,active)

{ this.index=parseInt(index); this .arr=document.getElementById(id).getElementsByTagName("li"); =active; } Table.prototype={ bind:function() {

this.arr[this.index].className=this.active;//初期化

var _self=this;
for (var i = 0; i {
this.arr[i].setAttribute("ext", i);
this.arr[i].onclick = function(e)
{
var _e = window .event||e;
var _target=_e.srcElement || >_self.setClass(parseInt(_target.getAttribute("ext")));
}
}
},
setClass:function(index)
{
this.arr [this.index].className="";
this.arr[index].className=this.active;
this.index=index;

デモのダウンロード