JavaScript自定义Tab控制器：点击事件无法调用setTab问题及优化咨询

Let's break down your problem step by step, starting with the onclick issue, then moving to a cleaner implementation that keeps your desired API and supports multiple instances.

Why the onclick can't call setTab? #

The core issue here is this binding in the onclick callback. When you assign tab_ctl.onclick = function() { ... }, inside that function this refers to the <li> element (the tab itself), not the Tab controller instance you created with tabs(). That's why this.setTab() throws an error—<li> elements don't have a setTab method.

Fixes:

You have two straightforward ways to fix this:

Option 1: Save a reference to the controller instance

Inside the addTab method, store the controller's this in a variable (like self) and use that in the callback:

this.addTab = function (div,label,title,click) {
  const self = this; // Save the controller instance reference
  // ... existing code ...
  if (click) { 
    tab_ctl.onclick = function () { 
      self.setTab(cnt); 
      click(); 
    }; 
  } else { 
    tab_ctl.onclick = function () { 
      self.setTab(cnt); 
    }; 
  }
  // ... existing code ...
}

Option 2: Use an arrow function (ES6+)

Arrow functions inherit this from the surrounding scope (the addTab method, which is bound to the controller instance):

this.addTab = function (div,label,title,click) {
  // ... existing code ...
  if (click) { 
    tab_ctl.onclick = () => { 
      this.setTab(cnt); 
      click(); 
    }; 
  } else { 
    tab_ctl.onclick = () => { 
      this.setTab(cnt); 
    }; 
  }
  // ... existing code ...
}

A Cleaner, More Maintainable Implementation #

Your current prototype-based approach works, but using ES6 Classes will make the code more readable, organized, and easier to extend—while still supporting multiple instances and your desired addTab/setTab API, no external libraries needed.

Here's a refactored version:

HTML (unchanged from your original, plus a second tab controller to demo multi-instance support)

<div id="myTabCtl"> 
 <div id="tab1"> 
 <img src="https://images.unsplash.com/photo-1546238232-20216dec9f72?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" style="width:240px;"> 
 </div> 
 <div id="tab2"> Cute puppies. 
 <img src="https://www.telegraph.co.uk/content/dam/news/2016/05/06/rexfeatures_4950182a_trans_NvBQzQNjv4Bqeo_i_u9APj8RuoebjoAHt0k9u7HhRJvuo-ZLenGRumA.jpg?imwidth=240" style="width:240px;"> 
 </div> 
 <div id="tab3"> No puppies here. 
 </div>
</div>

<div id="anotherTabCtl">
  <div id="tabA">Content for Tab A</div>
  <div id="tabB">Content for Tab B</div>
</div>

CSS (basic styling for usable tabs)

.xTabCtl {
  margin: 1rem 0;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}

.xTabRow {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  background: #f5f5f5;
}

.xTabItem {
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  user-select: none;
  border-bottom: 2px solid transparent;
}

.xTabItem:hover {
  background: #eee;
}

.xTabItemSel {
  background: white;
  border-bottom-color: #2196f3;
  color: #2196f3;
}

.xTabCtl > div:not(.xTabRow) {
  padding: 1.25rem;
}

JavaScript (ES6 Class)

class TabController {
  constructor(element) {
    this.element = element;
    this.tabs = [];
    
    // Initialize container and tab bar
    this.element.classList.add('xTabCtl');
    this.tabBar = document.createElement('ul');
    this.tabBar.classList.add('xTabRow');
    this.element.insertBefore(this.tabBar, this.element.firstChild);
  }

  addTab(divIdOrElement, label, title, onClickCallback) {
    // Resolve element from ID or direct element reference
    const contentDiv = typeof divIdOrElement === 'string' 
      ? document.getElementById(divIdOrElement) 
      : divIdOrElement;
    
    if (!contentDiv) return false;
    
    // Hide content by default
    contentDiv.style.display = 'none';
    
    // Create tab button
    const tabItem = document.createElement('li');
    tabItem.textContent = label;
    if (title) tabItem.title = title;
    tabItem.classList.add('xTabItem');
    
    // Bind click handler (arrow function preserves `this` as TabController)
    const tabIndex = this.tabs.length;
    tabItem.addEventListener('click', () => {
      this.setTab(tabIndex);
      onClickCallback?.(); // Run callback if provided (ES6 optional chaining)
    });
    
    this.tabBar.appendChild(tabItem);
    
    // Store tab metadata
    this.tabs.push({
      elem: tabItem,
      div: contentDiv,
      loaded: false
    });

    // Activate first tab by default if it's the first one added
    if (this.tabs.length === 1) {
      this.setTab(0);
    }

    return true;
  }

  setTab(tabIndex) {
    if (tabIndex < 0 || tabIndex >= this.tabs.length) return;
    
    // Reset all tabs and content
    this.tabs.forEach(tab => {
      tab.elem.classList.remove('xTabItemSel');
      tab.div.style.display = 'none';
      tab.loaded = false;
    });
    
    // Activate target tab
    const activeTab = this.tabs[tabIndex];
    activeTab.div.style.display = 'block';
    activeTab.elem.classList.add('xTabItemSel');
    activeTab.loaded = true;
  }
}

// Initialize first tab controller
const myTabs = new TabController(document.getElementById('myTabCtl'));
myTabs.addTab('tab1', 'Cute Puppies 1', 'Title 1');
myTabs.addTab('tab2', 'Cute Puppies 2', 'Title 2');
myTabs.addTab('tab3', 'No Puppies', 'Title 3', () => alert('hello.'));

// Initialize second tab controller (multi-instance example)
const anotherTabs = new TabController(document.getElementById('anotherTabCtl'));
anotherTabs.addTab('tabA', 'Tab A', 'Content A');
anotherTabs.addTab('tabB', 'Tab B', 'Content B');

Key improvements:

• ES6 Class syntax: Makes the code structure clear and easier to follow.
• Proper this binding: Arrow functions in event handlers ensure this always refers to the TabController instance.
• Multi-instance support: Each new TabController() creates an independent instance with no conflicts.
• Optional chaining: onClickCallback?.() safely runs the callback only if it exists.
• Default first tab activation: Automatically shows the first tab when it's added (remove this if you don't want the behavior).
• Cleaner event handling: Uses addEventListener instead of assigning onclick directly (more flexible for multiple handlers).

内容的提问来源于stack exchange，提问作者Erick