点击Dropdown选项实现Tabs显隐的功能结构与JS实现求助

核心逻辑 #

• 下拉选项与Tab面板通过唯一标识一一绑定
• 初始化时仅展示默认对应Tab，隐藏其余面板
• 监听下拉选择事件，动态切换对应Tab的可见状态

代码实现 #

HTML结构 #

<!-- Dropdown下拉框 -->
<select id="tabControlDropdown">
  <option value="tab1" selected>选项1</option>
  <option value="tab2">选项2</option>
  <option value="tab3">选项3</option>
  <option value="tab4">选项4</option>
</select>

<!-- Tabs面板容器 -->
<div class="tabs-container">
  <div id="tab1" class="tab-panel active">Tab1内容区域，可自行补充内容</div>
  <div id="tab2" class="tab-panel">Tab2内容区域，可自行补充内容</div>
  <div id="tab3" class="tab-panel">Tab3内容区域，可自行补充内容</div>
  <div id="tab4" class="tab-panel">Tab4内容区域，可自行补充内容</div>
</div>

基础样式（可根据业务需求自行调整） #

.tab-panel {
  display: none;
  padding: 20px;
  border: 1px solid #eee;
  margin-top: 10px;
}
.tab-panel.active {
  display: block;
}
#tabControlDropdown {
  padding: 8px 12px;
  min-width: 200px;
}

JS交互逻辑 #

// 获取DOM元素
const dropdown = document.getElementById('tabControlDropdown')
const tabPanels = document.querySelectorAll('.tab-panel')

// 切换Tab的公共函数
function switchTab(targetTabId) {
  // 隐藏所有Tab面板
  tabPanels.forEach(panel => {
    panel.classList.remove('active')
  })
  // 展示选中的目标Tab面板
  const targetPanel = document.getElementById(targetTabId)
  if(targetPanel) {
    targetPanel.classList.add('active')
  }
}

// 监听下拉框选择事件
dropdown.addEventListener('change', function(e) {
  const selectedTabId = e.target.value
  switchTab(selectedTabId)
})

// 页面初始化时渲染默认选中的Tab
switchTab(dropdown.value)

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