如何用HTML、CSS、JS及Bootstrap实现按钮切换图片及上传疑问

一、完整代码实现 #

HTML 结构

用Bootstrap的按钮组件和栅格系统布局，将食物、果汁的图片分组放在不同容器中：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片切换演示</title>
  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .img-container img {
      width: 100%;
      max-width: 200px;
      margin: 10px;
      border-radius: 8px;
    }
    .category-group {
      display: none;
    }
    .active {
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <!-- 按钮组 -->
    <div class="btn-group mb-4" role="group">
      <button type="button" class="btn btn-primary active" data-category="food">食物</button>
      <button type="button" class="btn btn-secondary" data-category="juice">果汁</button>
    </div>

    <!-- 食物图片容器 -->
    <div class="category-group active" id="food-group">
      <div class="img-container">
        <img src="你的食物图片1链接" alt="食物1">
      </div>
      <div class="img-container">
        <img src="你的食物图片2链接" alt="食物2">
      </div>
      <div class="img-container">
        <img src="你的食物图片3链接" alt="食物3">
      </div>
    </div>

    <!-- 果汁图片容器 -->
    <div class="category-group" id="juice-group">
      <div class="img-container">
        <img src="你的果汁图片1链接" alt="果汁1">
      </div>
      <div class="img-container">
        <img src="你的果汁图片2链接" alt="果汁2">
      </div>
      <div class="img-container">
        <img src="你的果汁图片3链接" alt="果汁3">
      </div>
    </div>
  </div>

  <!-- 引入Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // 获取所有分类按钮
    const categoryButtons = document.querySelectorAll('.btn-group .btn');
    // 获取所有图片分组容器
    const categoryGroups = document.querySelectorAll('.category-group');

    // 为每个按钮添加点击事件
    categoryButtons.forEach(button => {
      button.addEventListener('click', () => {
        // 切换按钮样式状态
        categoryButtons.forEach(btn => {
          btn.classList.remove('active', 'btn-primary');
          btn.classList.add('btn-secondary');
        });
        button.classList.add('active', 'btn-primary');
        button.classList.remove('btn-secondary');

        // 切换图片组显示状态
        const category = button.dataset.category;
        categoryGroups.forEach(group => group.classList.remove('active'));
        document.getElementById(`${category}-group`).classList.add('active');
      });
    });
  </script>
</body>
</html>

代码说明

• Bootstrap 引入：通过CDN快速调用Bootstrap的按钮、容器等组件，简化布局。
• 初始状态：默认激活食物按钮并显示对应图片组，通过active类控制显示/隐藏。
• 切换逻辑：点击按钮时先更新按钮样式，再隐藏所有图片组，最后显示对应分类的图片组。
• 图片样式：用CSS限制图片最大宽度、添加间距和圆角，优化视觉效果。

二、关于上传图片后出现链接的说明 #

你上传图片得到的链接是图片的网络存储地址，要在页面显示图片，需要把链接放到<img>标签的src属性中，而非直接粘贴链接文本。示例：

<!-- 错误：直接显示链接文本 -->
https://example.com/food1.jpg

<!-- 正确：用img标签渲染图片 -->
<img src="https://example.com/food1.jpg" alt="食物图片">

这样就能将链接对应的图片展示在页面上，而非显示纯文本链接。

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