什么是添加点击监听器到我的JavaScript标签栏的最佳方式是什么？

Question

我打算在JavaScript中实现一个标签栏模块。

我想创建一个的TabBar每次页面加载时间，然后放两个标签进去。

问题是，将点击事件添加到我的标签页的最佳方法是什么？

这里是我的代码：

// 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，但是如何？

Answer 1

里面的标签构造函数中添加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); 
}