页面加载默认显示首个Div内容，下拉选择切换展示对应Div内容

没问题，我帮你整理一个清晰、易维护的实现方案，完全匹配你的需求——页面加载时默认显示第一个div，下拉选择选项后自动切换到对应内容。咱们直接上可运行的代码，再拆解关键部分：

1. HTML 结构 #

首先把下拉框和对应的内容div关联起来，用选项的value和div的id做一一绑定，逻辑直观又好维护：

<!-- 下拉选择框 -->
<select id="contentSelector">
  <option value="content1">内容1</option>
  <option value="content2">内容2</option>
  <option value="content3">内容3</option>
  <option value="content4">内容4</option>
</select>

<!-- 内容Div容器 -->
<div class="content-box">
  <div id="content1" class="content-item active">这是第一个div的默认显示内容</div>
  <div id="content2" class="content-item">这是第二个div的专属内容</div>
  <div id="content3" class="content-item">这是第三个div的专属内容</div>
  <div id="content4" class="content-item">这是第四个div的专属内容</div>
</div>

2. CSS 样式 #

默认隐藏所有内容div，只给active类的div设置显示状态：

/* 默认隐藏所有内容项 */
.content-item {
  display: none;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

/* 显示激活状态的内容项 */
.content-item.active {
  display: block;
}

3. JavaScript 逻辑 #

处理初始显示和下拉切换的核心逻辑，代码简洁易懂：

document.addEventListener('DOMContentLoaded', function() {
  // 获取下拉框和所有内容div元素
  const selector = document.getElementById('contentSelector');
  const contentItems = document.querySelectorAll('.content-item');

  // 下拉框切换事件处理
  selector.addEventListener('change', function() {
    // 获取当前选中的目标div ID
    const targetId = this.value;
    
    // 先移除所有div的激活状态（隐藏所有内容）
    contentItems.forEach(item => {
      item.classList.remove('active');
    });
    
    // 给选中的目标div添加激活状态（显示对应内容）
    document.getElementById(targetId).classList.add('active');
  });
});

关键细节说明 #

• 初始状态保障：通过HTML给第一个div直接加active类，页面加载完成后立刻显示，不需要额外JS做初始化处理
• 切换逻辑清晰：每次下拉切换时，先统一隐藏所有内容，再单独显示选中项对应的div，避免出现多个div同时展示的问题
• 扩展性强：后续要新增选项和div，只需要在HTML里添加对应的<option>和<div>，完全不用修改CSS和JS代码

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