如何从零开始用JavaScript创建带隐藏禁用启用与跨Tab表单提交的响应式Tabs组件

核心实现思路 #

我们将通过HTML搭建基础结构，CSS处理响应式布局切换，JavaScript实现Tab交互、跨Tab表单管理及Tab的隐藏/禁用/启用功能。

1. HTML结构搭建 #

构建包含导航栏、跨Tab表单、功能控制按钮的基础框架：

<div class="tabs-container">
  <!-- Tab导航栏 -->
  <div class="tabs-nav" id="tabsNav">
    <button class="tab-link active" data-tab="tab1" data-enabled="true">基本信息</button>
    <button class="tab-link" data-tab="tab2" data-enabled="true">详细设置</button>
    <button class="tab-link" data-tab="tab3" data-enabled="true">确认提交</button>
  </div>

  <!-- 跨Tab表单 -->
  <form id="multiTabForm">
    <!-- Tab面板区域 -->
    <div class="tab-panel active" id="tab1">
      <div class="form-group">
        <label>姓名:</label>
        <input type="text" name="username" required>
      </div>
      <div class="form-group">
        <label>邮箱:</label>
        <input type="email" name="email" required>
      </div>
    </div>

    <div class="tab-panel" id="tab2">
      <div class="form-group">
        <label>地址:</label>
        <input type="text" name="address" required>
      </div>
      <div class="form-group">
        <label>电话:</label>
        <input type="tel" name="phone" required>
      </div>
    </div>

    <div class="tab-panel" id="tab3">
      <div class="form-group">
        <label>确认条款:</label>
        <input type="checkbox" name="agreement" required> 我同意所有条款
      </div>
      <button type="submit">提交表单</button>
    </div>
  </form>

  <!-- Tab控制按钮 -->
  <div class="controls">
    <button onclick="toggleTabVisibility('tab2')">切换Tab2显示/隐藏</button>
    <button onclick="toggleTabEnabled('tab2')">切换Tab2启用/禁用</button>
  </div>
</div>

2. CSS样式（响应式+布局切换） #

通过媒体查询实现横向/纵向布局切换，同时处理激活、禁用、隐藏状态的视觉表现：

/* 基础样式 */
.tabs-container {
  max-width: 900px;
  margin: 20px auto;
  padding: 0 15px;
}

.tabs-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.tab-link {
  padding: 10px 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}

.tab-link.active {
  border-bottom-color: #2196F3;
  color: #2196F3;
}

.tab-link.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tab-link.hidden {
  display: none;
}

.tab-panel {
  display: none;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 0 0 4px 4px;
}

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

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.controls {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

/* 响应式切换：屏幕宽度≤768px时改为纵向布局 */
@media (max-width: 768px) {
  .tabs-nav {
    flex-direction: column;
    border-bottom: none;
    border-right: 1px solid #eee;
    padding-right: 15px;
  }

  .tabs-container {
    display: flex;
    gap: 20px;
  }

  .tab-link {
    border-bottom: none;
    border-right: 2px solid transparent;
  }

  .tab-link.active {
    border-right-color: #2196F3;
  }
}

3. JavaScript功能实现 #

处理Tab切换、表单数据收集、Tab状态控制逻辑：

// 初始化组件
document.addEventListener('DOMContentLoaded', () => {
  const tabLinks = document.querySelectorAll('.tab-link');
  const tabPanels = document.querySelectorAll('.tab-panel');
  const form = document.getElementById('multiTabForm');

  // Tab切换逻辑
  tabLinks.forEach(link => {
    link.addEventListener('click', () => {
      if (link.classList.contains('disabled')) return;

      // 清除所有激活状态
      tabLinks.forEach(l => l.classList.remove('active'));
      tabPanels.forEach(p => p.classList.remove('active'));

      // 激活当前Tab
      link.classList.add('active');
      document.getElementById(link.dataset.tab).classList.add('active');
    });
  });

  // 表单提交逻辑
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    const submitData = Object.fromEntries(formData);
    // 替换为实际接口提交逻辑
    console.log('提交数据:', submitData);
    alert('表单提交成功！');
    form.reset();
    // 提交后返回第一个Tab
    tabLinks[0].click();
  });
});

// 切换Tab显示/隐藏
function toggleTabVisibility(tabId) {
  const tabLink = document.querySelector(`[data-tab="${tabId}"]`);
  const tabPanel = document.getElementById(tabId);
  
  tabLink.classList.toggle('hidden');
  tabPanel.classList.toggle('hidden');

  // 若隐藏的是当前激活Tab，自动切换到第一个可用Tab
  if (tabLink.classList.contains('active') && tabLink.classList.contains('hidden')) {
    const firstAvailable = document.querySelector('.tab-link:not(.hidden):not(.disabled)');
    firstAvailable?.click();
  }
}

// 切换Tab启用/禁用
function toggleTabEnabled(tabId) {
  const tabLink = document.querySelector(`[data-tab="${tabId}"]`);
  const isEnabled = tabLink.dataset.enabled === 'true';
  
  tabLink.dataset.enabled = !isEnabled;
  tabLink.classList.toggle('disabled');

  // 若禁用的是当前激活Tab，自动切换到第一个可用Tab
  if (tabLink.classList.contains('active') && !isEnabled) {
    const firstAvailable = document.querySelector('.tab-link:not(.disabled):not(.hidden)');
    firstAvailable?.click();
  }
}

关键功能说明 #

• 响应式布局切换：通过媒体查询在小屏幕将Tab导航从横向改为纵向排列，适配不同设备。
• 跨Tab表单：用一个表单容器包裹所有Tab面板，表单元素通过统一name属性关联，提交时一次性收集所有数据。
• Tab状态控制：通过添加/移除hidden、disabled类实现Tab的显示/隐藏、启用/禁用，同时处理状态变更后的Tab自动切换逻辑。

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