如何使用HTML/CSS实现类select菜单并切换页面内容？

你要的这种组件本质是选项卡（Tab）组件，完全可以用HTML+CSS+原生JS实现，下面是具体实现代码：

1. HTML结构 #

先搭建基础结构：顶部是选项按钮组，下方是对应的内容区块。

<div class="tab-container">
  <!-- 选项按钮组 -->
  <div class="tab-buttons">
    <button class="tab-btn active" data-target="content1">选项1</button>
    <button class="tab-btn" data-target="content2">选项2</button>
    <button class="tab-btn" data-target="content3">选项3</button>
  </div>
  <!-- 内容区块 -->
  <div class="tab-contents">
    <div id="content1" class="tab-content active">这是选项1对应的内容</div>
    <div id="content2" class="tab-content">这是选项2对应的内容</div>
    <div id="content3" class="tab-content">这是选项3对应的内容</div>
  </div>
</div>

2. CSS样式（匹配参考图的按钮式外观） #

通过CSS实现按钮横向排列、选中态高亮，以及内容区块的显示/隐藏：

/* 容器样式 */
.tab-container {
  max-width: 800px;
  margin: 20px auto;
}

/* 按钮组布局 */
.tab-buttons {
  display: flex;
  border-bottom: 1px solid #eee;
}

/* 按钮基础样式 */
.tab-btn {
  background: #fff;
  border: 1px solid #eee;
  border-bottom: none;
  padding: 10px 20px;
  margin-right: 5px;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  transition: all 0.2s;
}

/* 按钮悬浮态 */
.tab-btn:hover {
  background: #f5f5f5;
}

/* 按钮选中态（匹配参考图的高亮效果） */
.tab-btn.active {
  border-color: #007bff;
  background: #e3f2fd;
  color: #007bff;
  font-weight: 500;
}

/* 内容区块基础样式 */
.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #eee;
  border-top: none;
}

/* 选中内容的显示状态 */
.tab-content.active {
  display: block;
}

3. JS逻辑（实现切换功能） #

用原生JS监听按钮点击，切换按钮和内容的active类完成内容切换：

// 获取所有按钮和内容区块
const tabButtons = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');

// 遍历按钮绑定点击事件
tabButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 移除所有按钮的active类
    tabButtons.forEach(btn => btn.classList.remove('active'));
    // 给当前点击的按钮添加active类
    button.classList.add('active');
    
    // 获取目标内容的ID
    const targetId = button.getAttribute('data-target');
    // 移除所有内容的active类
    tabContents.forEach(content => content.classList.remove('active'));
    // 显示目标内容
    document.getElementById(targetId).classList.add('active');
  });
});

扩展说明 #

• 如果需要支持更多选项，只需要在HTML中添加对应的按钮和内容区块，无需修改JS和CSS
• 样式可根据需求调整，比如修改颜色、间距、圆角等，完全匹配参考图设计
• 若使用Vue/React等框架，可借助框架的状态管理（如Vue的v-show/v-if、React的state）实现更简洁的切换逻辑

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