js实现tab新增

实现 Tab 新增功能

HTML 结构

<div class="tabs">
  <div class="tab-header">
    <button class="tab-btn active" data-tab="tab1">Tab 1</button>
    <button class="tab-btn" data-tab="tab2">Tab 2</button>
    <button class="tab-add">+</button>
  </div>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">Content 1</div>
    <div class="tab-pane" id="tab2">Content 2</div>
  </div>
</div>

CSS 样式

.tab-btn.active {
  background-color: #ddd;
}
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}

JavaScript 实现

document.addEventListener('DOMContentLoaded', function() {
  const tabHeader = document.querySelector('.tab-header');
  const tabContent = document.querySelector('.tab-content');
  let tabCount = document.querySelectorAll('.tab-btn:not(.tab-add)').length;

  // 切换 Tab
  tabHeader.addEventListener('click', function(e) {
    if (e.target.classList.contains('tab-btn') && !e.target.classList.contains('tab-add')) {
      document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
      document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));

      e.target.classList.add('active');
      const tabId = e.target.getAttribute('data-tab');
      document.getElementById(tabId).classList.add('active');
    }

    // 添加新 Tab
    if (e.target.classList.contains('tab-add')) {
      tabCount++;
      const newTabId = `tab${tabCount}`;

      // 创建新按钮
      const newBtn = document.createElement('button');
      newBtn.className = 'tab-btn';
      newBtn.textContent = `Tab ${tabCount}`;
      newBtn.setAttribute('data-tab', newTabId);

      // 创建新内容面板
      const newPane = document.createElement('div');
      newPane.className = 'tab-pane';
      newPane.id = newTabId;
      newPane.textContent = `Content ${tabCount}`;

      // 插入元素
      e.target.insertAdjacentElement('beforebegin', newBtn);
      tabContent.appendChild(newPane);

      // 激活新 Tab
      document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
      document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));
      newBtn.classList.add('active');
      newPane.classList.add('active');
    }
  });
});

功能说明

基本 Tab 切换 通过给按钮和内容面板添加 active 类来控制显示状态，点击非添加按钮时切换对应内容。

动态添加 Tab 点击 + 按钮时创建新的 Tab 按钮和内容面板，自动递增编号并激活新创建的 Tab。

DOM 操作 使用 insertAdjacentElement 在添加按钮前插入新按钮，使用 appendChild 在内容区域添加新面板。

注意事项 确保每个 Tab 按钮的 data-tab 属性与对应内容面板的 id 匹配，样式可根据实际需求调整。