css+html+js实现一个响应式的六个横向排版的选项卡，点击选项卡切换背景颜色，每个选项卡上面图片下面文本

好的，我可以为您解答这个问题。

首先，我们需要使用HTML和CSS来创建选项卡的基本结构和样式，然后使用JavaScript来实现选项卡的切换效果。

HTML结构：

<div class="tabs">
  <div class="tab active" data-tab="1">
    <img src="image1.jpg">
    <p>选项卡1</p>
  </div>
  <div class="tab" data-tab="2">
    <img src="image2.jpg">
    <p>选项卡2</p>
  </div>
  <div class="tab" data-tab="3">
    <img src="image3.jpg">
    <p>选项卡3</p>
  </div>
  <div class="tab" data-tab="4">
    <img src="image4.jpg">
    <p>选项卡4</p>
  </div>
  <div class="tab" data-tab="5">
    <img src="image5.jpg">
    <p>选项卡5</p>
  </div>
  <div class="tab" data-tab="6">
    <img src="image6.jpg">
    <p>选项卡6</p>
  </div>
</div>

CSS样式：

.tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.tab {
  width: calc(33.33% - 10px);
  margin-bottom: 20px;
  padding: 20px;
  text-align: center;
  background-color: #f6f6f6;
  cursor: pointer;
}

.tab img {
  max-width: 100%;
  height: auto;
}

.tab p {
  margin-top: 10px;
  font-size: 18px;
}

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

JavaScript代码：

const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    const activeTab = document.querySelector('.tab.active');
    if (activeTab) activeTab.classList.remove('active');
    tab.classList.add('active');
  });
});

以上代码实现了一个六个横向排版的选项卡，并且可以通过点击选项卡来切换背景颜色。每个选项卡上面是一张图片，下面是一段文本。同时，这个选项卡还是一个响应式的设计。