如何只用css实现点击按钮切换图片

纯CSS实现点击切换图片的两种方案

方案一：基于:checked伪类实现

这种方案的核心是利用<input type="radio">的选中状态，配合<label>标签作为点击按钮，通过CSS的:checked伪类选择器匹配选中状态，控制对应图片的显示和隐藏。同一个name的radio单选框只能同时选中一个，刚好满足切换的需求。

首先我们需要准备多个radio输入框，每个对应一张图片，再用label作为可点击的切换按钮，最后把图片放在对应的radio后面，通过CSS控制默认隐藏，选中时显示。

<!-- HTML结构 -->
<div class="img-switch-container">
  <!-- 切换按钮 -->
  <div class="switch-btns">
    <label for="img1">图片1</label>
    <label for="img2">图片2</label>
    <label for="img3">图片3</label>
  </div>
  <!-- 隐藏的radio输入框 -->
  <input type="radio" name="img-switch" id="img1" checked>
  <input type="radio" name="img-switch" id="img2">
  <input type="radio" name="img-switch" id="img3">
  <!-- 图片容器 -->
  <div class="img-list">
    <img src="https://picsum.photos/200/300?random=2" alt="示例图片1">
    <img src="https://picsum.photos/200/300?random=3" alt="示例图片2">
    <img src="https://picsum.photos/200/300?random=4" alt="示例图片3">
  </div>
</div>

接下来写对应的CSS样式，首先隐藏所有radio输入框，默认隐藏所有图片，当某个radio被选中时，显示它后面对应的图片。这里需要注意选择器的层级关系，利用相邻兄弟选择器或者通用兄弟选择器来匹配选中状态。

/* 隐藏所有radio输入框 */
input[name="img-switch"] {
  display: none;
}

/* 按钮基础样式 */
.switch-btns label {
  display: inline-block;
  padding: 8px 16px;
  margin: 0 5px;
  background-color: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}

/* 选中按钮的样式 */
#img1:checked ~ .switch-btns label[for="img1"],
#img2:checked ~ .switch-btns label[for="img2"],
#img3:checked ~ .switch-btns label[for="img3"] {
  background-color: #409eff;
  color: #fff;
}

/* 默认隐藏所有图片 */
.img-list img {
  display: none;
  width: 200px;
  height: 300px;
  margin-top: 10px;
}

/* 选中的radio对应的图片显示 */
#img1:checked ~ .img-list img:nth-child(1),
#img2:checked ~ .img-list img:nth-child(2),
#img3:checked ~ .img-list img:nth-child(3) {
  display: block;
}

方案二：基于:target伪类实现

这种方案利用URL的锚点定位原理，点击按钮跳转到对应的锚点，通过:target伪类匹配当前URL中的锚点元素，控制对应图片的显示。不需要使用表单元素，结构更简单一些。

我们可以把每张图片放在一个单独的容器里，给每个容器设置唯一的id作为锚点，按钮的href指向对应的id，点击按钮时URL会带上对应的锚点，CSS通过:target选择器匹配当前激活的锚点容器，显示对应的图片。

<!-- HTML结构 -->
<div class="target-img-container">
  <!-- 切换按钮 -->
  <div class="target-btns">
    <a href="#target-img1">图片1</a>
    <a href="#target-img2">图片2</a>
    <a href="#target-img3">图片3</a>
  </div>
  <!-- 图片容器 -->
  <div class="target-img-list">
    <div id="target-img1" class="target-img-item">
      <img src="https://picsum.photos/200/300?random=5" alt="示例图片1">
    </div>
    <div id="target-img2" class="target-img-item">
      <img src="https://picsum.photos/200/300?random=6" alt="示例图片2">
    </div>
    <div id="target-img3" class="target-img-item">
      <img src="https://picsum.photos/200/300?random=7" alt="示例图片3">
    </div>
  </div>
</div>

对应的CSS样式，默认隐藏所有图片容器，当容器被:target匹配时显示，同时可以给按钮加一些激活状态的样式。

/* 按钮基础样式 */
.target-btns a {
  display: inline-block;
  padding: 8px 16px;
  margin: 0 5px;
  background-color: #f0f0f0;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  cursor: pointer;
}

/* 默认隐藏所有图片容器 */
.target-img-item {
  display: none;
  width: 200px;
  height: 300px;
  margin-top: 10px;
}

.target-img-item img {
  width: 100%;
  height: 100%;
}

/* 匹配当前锚点的容器显示 */
.target-img-item:target {
  display: block;
}

/* 可以给激活的按钮加样式，这里通过兄弟选择器匹配锚点对应的按钮 */
#target-img1:target ~ .target-btns a[href="#target-img1"],
#target-img2:target ~ .target-btns a[href="#target-img2"],
#target-img3:target ~ .target-btns a[href="#target-img3"] {
  background-color: #409eff;
  color: #fff;
}

两种方案的对比

我们可以通过下面的表格对比两种方案的特点，方便根据实际场景选择：

注意事项

• 两种方案都不支持复杂的切换动画，如果需要过渡动画可以配合CSS的opacity和transition属性实现淡入淡出效果，不过隐藏显示还是基于伪类匹配。
• :target方案点击浏览器后退按钮会回到上一个锚点状态，而:checked方案不会受浏览器历史记录影响。
• 如果页面中有其他锚点逻辑，使用:target方案可能会有冲突，需要根据实际页面情况选择。

css图片切换:checked:target伪类修改时间：2026-06-27 17:54:50