当前位置：首页 > JavaScript

js 实现增加tab

2026-04-04 15:24:41JavaScript

使用 JavaScript 实现 Tab 功能

通过动态创建 DOM 元素和事件监听实现 Tab 切换功能。以下是一个完整的实现方案：

HTML 结构

<div class="tab-container">
  <div class="tab-buttons">
    <!-- 动态生成按钮 -->
  </div>
  <div class="tab-content">
    <!-- 动态生成内容 -->
  </div>
</div>

CSS 样式

.tab-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.tab-btn {
  padding: 8px 16px;
  cursor: pointer;
  background: #eee;
  border: none;
  border-radius: 4px;
}

.tab-btn.active {
  background: #007bff;
  color: white;
}

.tab-panel {
  display: none;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

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

JavaScript 实现

function createTabs(tabsData) {
  const container = document.querySelector('.tab-container');
  const buttonsContainer = container.querySelector('.tab-buttons');
  const contentContainer = container.querySelector('.tab-content');

  // 清空现有内容
  buttonsContainer.innerHTML = '';
  contentContainer.innerHTML = '';

  tabsData.forEach((tab, index) => {
    // 创建按钮
    const btn = document.createElement('button');
    btn.className = `tab-btn ${index === 0 ? 'active' : ''}`;
    btn.textContent = tab.title;
    btn.dataset.tabIndex = index;

    // 创建内容面板
    const panel = document.createElement('div');
    panel.className = `tab-panel ${index === 0 ? 'active' : ''}`;
    panel.innerHTML = tab.content;

    // 添加到DOM
    buttonsContainer.appendChild(btn);
    contentContainer.appendChild(panel);

    // 添加点击事件
    btn.addEventListener('click', () => {
      // 移除所有active类
      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
      document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));

      // 激活当前tab
      btn.classList.add('active');
      panel.classList.add('active');
    });
  });
}

// 使用示例
const myTabs = [
  { title: 'Tab 1', content: 'Content for tab 1' },
  { title: 'Tab 2', content: 'Content for tab 2' },
  { title: 'Tab 3', content: 'Content for tab 3' }
];

createTabs(myTabs);

使用 jQuery 简化实现

如果项目中已引入 jQuery，可以使用更简洁的实现方式：

function createJqueryTabs(tabsData) {
  const $container = $('.tab-container');
  const $buttonsContainer = $container.find('.tab-buttons');
  const $contentContainer = $container.find('.tab-content');

  $buttonsContainer.empty();
  $contentContainer.empty();

  tabsData.forEach((tab, index) => {
    const $btn = $(`<button class="tab-btn ${index === 0 ? 'active' : ''}">${tab.title}</button>`)
      .data('tab-index', index)
      .appendTo($buttonsContainer);

    const $panel = $(`<div class="tab-panel ${index === 0 ? 'active' : ''}">${tab.content}</div>`)
      .appendTo($contentContainer);

    $btn.on('click', function() {
      $('.tab-btn').removeClass('active');
      $('.tab-panel').removeClass('active');
      $(this).addClass('active');
      $panel.addClass('active');
    });
  });
}

动态添加新 Tab

实现动态添加新 Tab 的功能：

js 实现增加tab

function addNewTab(title, content) {
  const tabs = document.querySelectorAll('.tab-btn');
  const newIndex = tabs.length;

  const btn = document.createElement('button');
  btn.className = 'tab-btn';
  btn.textContent = title;
  btn.dataset.tabIndex = newIndex;

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

  document.querySelector('.tab-buttons').appendChild(btn);
  document.querySelector('.tab-content').appendChild(panel);

  btn.addEventListener('click', function() {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
    this.classList.add('active');
    panel.classList.add('active');
  });
}

这些实现方案提供了完整的 Tab 功能，包括初始化创建和动态添加新 Tab。可以根据项目需求选择纯 JavaScript 或 jQuery 版本。