在可切换的活动选项卡HTML/CSS上添加图像

<div class="tab-container">
  <button class="tab">选项卡1</button>
  <button class="tab">选项卡2</button>
  <button class="tab">选项卡3</button>
</div>

.tab-container {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  display: flex;
}

.tab {
  background-color: #ddd;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 20px;
  flex: 1;
  text-align: center;
  font-size: 16px;
}

.tab:hover {
  background-color: #bbb;
}

.tab.active {
  background-color: #ccc;
}

var tabs = document.getElementsByClassName("tab");
for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

<div class="tab-container">
  <button class="tab active">选项卡1</button>
  <button class="tab">选项卡2</button>
  <button class="tab">选项卡3</button>
</div>

<div class="tab-content">
  <div class="tab-pane active">
    <img src="image1.jpg" alt="图像1">
  </div>
  <div class="tab-pane">
    <img src="image2.jpg" alt="图像2">
  </div>
  <div class="tab-pane">
    <img src="image3.jpg" alt="图像3">
  </div>
</div>