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);
}

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

1 个答案: