RMD:如何通过带图和表的循环创建选项卡式块

通过带图和表的循环创建选项卡式块，可以使用HTML、CSS和JavaScript来实现。下面是一个示例的实现步骤：

HTML结构：创建一个包含选项卡标题和内容的容器。每个选项卡标题对应一个选项卡内容。

<div class="tab-container">
  <div class="tab-header">
    <div class="tab-item active">选项卡1</div>
    <div class="tab-item">选项卡2</div>
    <div class="tab-item">选项卡3</div>
  </div>
  <div class="tab-content">
    <div class="tab-pane active">
      <img src="image1.jpg" alt="图片1">
      <table>
        <tr>
          <th>表头1</th>
          <th>表头2</th>
        </tr>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
        </tr>
      </table>
    </div>
    <div class="tab-pane">
      <img src="image2.jpg" alt="图片2">
      <table>
        <tr>
          <th>表头3</th>
          <th>表头4</th>
        </tr>
        <tr>
          <td>数据3</td>
          <td>数据4</td>
        </tr>
      </table>
    </div>
    <div class="tab-pane">
      <img src="image3.jpg" alt="图片3">
      <table>
        <tr>
          <th>表头5</th>
          <th>表头6</th>
        </tr>
        <tr>
          <td>数据5</td>
          <td>数据6</td>
        </tr>
      </table>
    </div>
  </div>
</div>

CSS样式：设置选项卡的样式，包括标题和内容的显示方式、选中状态的样式等。

.tab-container {
  width: 100%;
}

.tab-header {
  display: flex;
}

.tab-item {
  flex: 1;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.tab-item.active {
  background-color: #f00;
  color: #fff;
}

.tab-content {
  margin-top: 10px;
}

.tab-pane {
  display: none;
}

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

JavaScript交互：通过JavaScript代码实现选项卡的切换效果。

// 获取选项卡标题和内容的元素
const tabItems = document.querySelectorAll('.tab-item');
const tabPanes = document.querySelectorAll('.tab-pane');

// 为每个选项卡标题添加点击事件
tabItems.forEach((item, index) => {
  item.addEventListener('click', () => {
    // 移除所有选项卡的选中状态
    tabItems.forEach((item) => {
      item.classList.remove('active');
    });
    // 添加当前选项卡的选中状态
    item.classList.add('active');
    
    // 隐藏所有选项卡内容
    tabPanes.forEach((pane) => {
      pane.classList.remove('active');
    });
    // 显示当前选中的选项卡内容
    tabPanes[index].classList.add('active');
  });
});

通过以上步骤，就可以实现带图和表的循环创建选项卡式块。用户点击不同的选项卡标题时，对应的选项卡内容会显示出来，其他选项卡内容则隐藏起来。可以根据实际需求修改HTML、CSS和JavaScript代码，添加更多选项卡和内容。