无需Select方法，点击Div实现单Div内内容显示隐藏切换可行吗？

完全可以实现这个需求，不需要使用<select>元素，仅通过原生JavaScript结合鼠标点击事件就能完成单个容器内选项与对应内容的切换。以下是具体实现代码：

调整后的HTML结构 #

首先修正原HTML的结构问题（外层.inv会导致所有内容默认隐藏），给选项和对应内容添加清晰的类名：

<div class="container">
  <!-- 选项区域 -->
  <div class="option">Option 1</div>
  <div class="option">Option 2</div>
  <div class="option">Option 3</div>

  <!-- 内容区域 -->
  <div class="content inv">Content 1</div>
  <div class="content inv">Content 2</div>
  <div class="content inv">Content 3</div>
</div>

CSS样式 #

保留基础的隐藏类，可额外给选项添加点击反馈样式提升交互感：

.inv {
  display: none;
}

.option {
  padding: 8px 12px;
  cursor: pointer;
  border: 1px solid #eee;
  margin-bottom: 4px;
}

.option:hover {
  background-color: #f5f5f5;
}

JavaScript逻辑 #

通过元素索引关联选项与内容，点击选项时切换对应内容的显示状态：

// 获取所有选项和内容元素
const options = document.querySelectorAll('.option');
const contents = document.querySelectorAll('.content');

// 给每个选项绑定点击事件
options.forEach((option, index) => {
  option.addEventListener('click', () => {
    // 先隐藏所有内容
    contents.forEach(content => content.classList.add('inv'));
    // 显示当前选项对应的内容
    contents[index].classList.remove('inv');
  });
});

实现说明 #

• 利用元素索引建立选项与内容的对应关系，无需额外的id或data-*属性（如果需要更灵活的关联，也可以给选项添加data-target属性指向对应内容的类/ID）
• 点击选项时先统一隐藏所有内容，再显示目标内容，确保同一时间只有一个内容可见
• 原生JavaScript实现，无需依赖任何框架，兼容性良好

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