0

JavaScript でタブ バー モジュールを実装する予定です。

ページが読み込まれるたびにTabBarを作成し、そこに 2 つのTabを配置したいと考えています。

問題は、クリック イベントをタブに追加する最良の方法は何ですか?

これが私のコードです：

 // A tab in tab bar.
 Tab = function(titleID, contentID) {
   this.title = document.getElementById(titleID);
   this.content = document.getElementById(contentID);
 }

 Tab.prototype.show = function() {
   this.title.className = "title-bg-active";
 }

 Tab.prototype.hide = function() {
   this.title.className = "";
 }


 // Tab bar contains several tabs.
 TabBar = function() {
   this.tabs = [];
 }

 TabBar.prototype.add = function(tab) {
   // TODO add click listener to tab
   this.tabs.push(tab);
 }

 TabBar.prototype.open = function(tab) {
   for(var i = 0; i < this.tabs.length; i++) {
     if(tab.title == this.tabs[i].title) {
       tab.show();
     }else{
       tab.hide();
     }
   }
 }

 window.onload = function(){
   tb = new TabBar();
   tb.add(new Tab("famous", "famous-content"));
   tb.add(new Tab("recently", "recently-content"));
 }

jQueryやその他のライブラリは本当に使いたくないです、ありがとう！

編集:
他のタブを閉じるように通知する必要もありますが、どうすればそれを行うことができますonclickか? タブには を保持する必要があると思いますtabbarが、どうすればよいですか?

4

1 に答える 1

2

タブ コンストラクター内で を追加this.title.onclick = this.onclickし、プロトタイプで onclick を定義します。

Tab.prototype.onclick = function(event) {
    // handle click
    // 'this' will hold the clicked element
}

あなたのアップデートを考えると、これはうまくいくかもしれません：

TabBar.prototype.add = function(tab) {
    var bar = this;
    tab.title.onclick = (function(clickedTab){
        return function() {
            // Hide all tabs
            for(var i=0; i<bar.tabs.length; i++) {
                bar.tabs[i].hide();
            }

            // Show clicked tab
            clickedTab.show();
        }
    }(tab));
    this.tabs.push(tab);
}
于 2013-04-24T03:47:39.557 に答える