javascript - 将点击监听器添加到 JavaScript 选项卡栏的最佳方法是什么？

Question

我计划用 JavaScript 实现一个标签栏模块。

我想在每次页面加载时创建一个TabBar，然后在其中放入两个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，但如何实现呢？

Answer 1

在选项卡构造函数中，添加 this.title.onclick = this.onclick，然后在原型(prototype)中定义 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);
}