创建选项卡式图片库-更改我的flexbox卡片

<div class="tab-container">
   <div class="tab">
      <button class="tab-button active" data-tab="tab1">Tab 1</button>
      <button class="tab-button" data-tab="tab2">Tab 2</button>
      <button class="tab-button" data-tab="tab3">Tab 3</button>
   </div>
   <div class="tab-content">
      <div id="tab1" class="tab-pane active">
         <!-- 第一个选项卡的图片 -->
         <img src="image1.jpg" alt="Image 1">
      </div>
      <div id="tab2" class="tab-pane">
         <!-- 第二个选项卡的图片 -->
         <img src="image2.jpg" alt="Image 2">
      </div>
      <div id="tab3" class="tab-pane">
         <!-- 第三个选项卡的图片 -->
         <img src="image3.jpg" alt="Image 3">
      </div>
   </div>
</div>

.tab-container {
   display: flex;
   flex-direction: column;
}

.tab {
   display: flex;
   justify-content: flex-start;
}

.tab-button {
   padding: 10px;
   border: none;
   background: none;
   cursor: pointer;
   outline: none;
   font-weight: bold;
}

.tab-button.active {
   color: blue;
}

.tab-content {
   flex: 1;
}

.tab-pane {
   display: none;
}

.tab-pane.active {
   display: block;
}

// 获取所有选项卡按钮和内容
const tabButtons = document.querySelectorAll('.tab-button');
const tabContents = document.querySelectorAll('.tab-pane');

// 为每个选项卡按钮添加点击事件
tabButtons.forEach((button) => {
   button.addEventListener('click', () => {
      // 移除所有选项卡按钮的active类
      tabButtons.forEach((btn) => {
         btn.classList.remove('active');
      });
      // 隐藏所有选项卡内容
      tabContents.forEach((content) => {
         content.classList.remove('active');
      });
      // 添加当前选项卡按钮的active类
      button.classList.add('active');
      // 显示与当前选项卡按钮相关的内容
      const tabId = button.getAttribute('data-tab');
      const tabContent = document.getElementById(tabId);
      tabContent.classList.add('active');
   });
});