如何用HTML实现按钮点击切换同一区域的店铺分类列表？

嘿，作为前端新手，这个需求真的超容易实现！咱不用搞复杂的框架，纯HTML+CSS+JavaScript就能搞定，我给你整一个最直白的方案，看完就能上手👇

核心思路 #

其实就是用按钮触发事件，控制不同分类的内容块「显示/隐藏」：默认只显示一个分类的内容，点击对应按钮时，就把当前显示的内容藏起来，把点击按钮对应的内容显示出来，完美实现同一区域切换。

完整代码示例 #

HTML结构 #

先搭好按钮组和内容区域的架子，给按钮和对应的内容块做个关联（用data-target属性绑定内容块的ID）：

<!-- 分类按钮组 -->
<div class="category-buttons">
  <button class="btn active" data-target="menswear">Menswear Shops</button>
  <button class="btn" data-target="food">Food Shops</button>
  <button class="btn" data-target="sports">Sports Shops</button>
  <!-- 可以继续加更多按钮 -->
</div>

<!-- 店铺列表显示区域 -->
<div class="shop-list-container">
  <div id="menswear" class="shop-category active">
    <h3>Menswear Shops</h3>
    <ul>
      <li>Urban Style Mens</li>
      <li>Classic Gentleman Co.</li>
      <li>Sporty Mens Hub</li>
    </ul>
  </div>
  <div id="food" class="shop-category">
    <h3>Food Shops</h3>
    <ul>
      <li>Fresh Bakes Cafe</li>
      <li>Spicy Noodle Bar</li>
      <li>Healthy Bowl Shop</li>
    </ul>
  </div>
  <div id="sports" class="shop-category">
    <h3>Sports Shops</h3>
    <ul>
      <li>Pro Sports Gear</li>
      <li>Outdoor Adventure Store</li>
      <li>Fitness Equipment Hub</li>
    </ul>
  </div>
  <!-- 对应更多分类的内容块 -->
</div>

CSS样式 #

简单美化一下，重点是把所有分类内容默认隐藏，只显示带active类的内容，同时给选中的按钮加个样式，让用户知道当前选的是哪个：

/* 按钮组样式 */
.category-buttons {
  margin: 20px 0;
}
.btn {
  padding: 8px 16px;
  margin-right: 10px;
  border: none;
  border-radius: 4px;
  background: #e0e0e0;
  cursor: pointer;
}
.btn.active {
  background: #2196f3;
  color: white;
}

/* 内容区域样式 */
.shop-list-container {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.shop-category {
  display: none; /* 默认所有内容都隐藏 */
}
.shop-category.active {
  display: block; /* 只有带active的内容显示 */
}

JavaScript逻辑 #

给每个按钮加点击事件，点击时切换对应内容的显示状态：

// 获取所有按钮和分类内容块
const buttons = document.querySelectorAll('.btn');
const categories = document.querySelectorAll('.shop-category');

// 给每个按钮绑定点击事件
buttons.forEach(button => {
  button.addEventListener('click', () => {
    // 1. 先移除所有按钮的active类
    buttons.forEach(btn => btn.classList.remove('active'));
    // 2. 给当前点击的按钮加上active类
    button.classList.add('active');
    
    // 3. 获取当前按钮对应的内容块ID
    const targetId = button.getAttribute('data-target');
    // 4. 移除所有内容块的active类
    categories.forEach(cat => cat.classList.remove('active'));
    // 5. 给对应内容块加上active类，显示它
    document.getElementById(targetId).classList.add('active');
  });
});

为啥这个方案适合新手？ #

• 代码量少：没有复杂概念，都是基础的HTML标签、CSS类操作、JS事件监听，容易理解
• 扩展性强：要加新分类的话，只需要多写一个按钮和对应的内容块，JS代码不用改
• 视觉反馈清晰：按钮的选中状态、内容的切换都有明确的视觉提示

要是你之后店铺数据变多，想动态生成内容，也可以把分类数据存在数组里，用JS循环生成按钮和内容，但先把这个静态版本搞懂，再进阶也不迟～

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