js对象实现选项卡功能

使用JavaScript对象实现选项卡功能

通过JavaScript对象管理选项卡状态和行为，可以实现更模块化的代码结构。以下是一种实现方式：

定义选项卡对象

const TabSystem = {
  tabs: [],
  activeTab: null,

  init: function(containerId) {
    this.container = document.getElementById(containerId);
    this.tabHeaders = this.container.querySelectorAll('.tab-header');
    this.tabContents = this.container.querySelectorAll('.tab-content');

    this.tabs = Array.from(this.tabHeaders).map((header, index) => ({
      header,
      content: this.tabContents[index]
    }));

    this.activeTab = this.tabs[0];
    this._activateTab(this.activeTab);
    this._setupEventListeners();
  },

  _setupEventListeners: function() {
    this.tabs.forEach(tab => {
      tab.header.addEventListener('click', () => {
        this._activateTab(tab);
      });
    });
  },

  _activateTab: function(tab) {
    this.tabs.forEach(t => {
      t.header.classList.remove('active');
      t.content.classList.remove('active');
    });

    tab.header.classList.add('active');
    tab.content.classList.add('active');
    this.activeTab = tab;
  }
};

HTML结构示例

<div id="tab-container">
  <div class="tab-header active">Tab 1</div>
  <div class="tab-header">Tab 2</div>
  <div class="tab-header">Tab 3</div>

  <div class="tab-content active">Content 1</div>
  <div class="tab-content">Content 2</div>
  <div class="tab-content">Content 3</div>
</div>

CSS样式示例

.tab-header {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #ddd;
  margin-right: 5px;
}

.tab-header.active {
  background-color: #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
  margin-top: -1px;
}

.tab-content.active {
  display: block;
}

初始化选项卡系统

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
  TabSystem.init('tab-container');
});

扩展功能方法

可以通过扩展TabSystem对象来增加更多功能：

TabSystem.addTab = function(title, content) {
  const newHeader = document.createElement('div');
  newHeader.className = 'tab-header';
  newHeader.textContent = title;

  const newContent = document.createElement('div');
  newContent.className = 'tab-content';
  newContent.innerHTML = content;

  this.container.insertBefore(newHeader, this.tabContents[0]);
  this.container.appendChild(newContent);

  const newTab = {
    header: newHeader,
    content: newContent
  };

  this.tabs.push(newTab);
  newHeader.addEventListener('click', () => {
    this._activateTab(newTab);
  });
};

TabSystem.removeTab = function(index) {
  if (index < 0 || index >= this.tabs.length) return;

  const tab = this.tabs[index];
  tab.header.remove();
  tab.content.remove();
  this.tabs.splice(index, 1);

  if (tab === this.activeTab && this.tabs.length > 0) {
    this._activateTab(this.tabs[Math.max(0, index-1)]);
  }
};

这种面向对象的方式使代码更易于维护和扩展，同时保持了良好的封装性。