CSS三个标题及对应内容的tab切换

要实现CSS三个标题及对应内容的tab切换，你可以使用纯HTML和CSS来完成。这里有一个简单的示例，展示了如何创建三个标题及其对应内容的tab切换效果：

HTML部分：

html

<div class="tabs">

  <div class="tab" id="tab1">标题1</div>

  <div class="tab" id="tab2">标题2</div>

  <div class="tab" id="tab3">标题3</div>

  <div class="tab-content" id="content1">

    <p>这是标题1对应的内容。</p>

  </div>

  <div class="tab-content" id="content2">

    <p>这是标题2对应的内容。</p>

  </div>

  <div class="tab-content" id="content3">

    <p>这是标题3对应的内容。</p>

  </div>

</div>

CSS部分：

css

.tabs {

  display: flex;

  flex-direction: column;

}

.tab {

  cursor: pointer;

  padding: 10px;

  border: 1px solid #ccc;

  margin-bottom: 5px;

}

.tab-content {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.5s ease-in-out;

  background-color: #f5f5f5;

  padding: 10px;

  border: 1px solid #ccc;

}

.tab-content.active {

  max-height: 1000px; /* 根据你的内容调整这个值 */

}

JavaScript部分（用于切换tab）：

javascript

const tabs = document.querySelectorAll('.tab');

const tabContents = document.querySelectorAll('.tab-content');

tabs.forEach((tab, index) => {

  tab.addEventListener('click', () => {

    tabContents.forEach(tabContent => {

      tabContent.classList.remove('active');

    });

    tabContents[index].classList.add('active');

  });

});

这个示例中，.tab 类用于表示每个标题，.tab-content 类用于表示每个标题对应的内容。默认情况下，所有内容的 max-height 设置为0，并且使用 overflow: hidden 来隐藏它们。当点击一个标题时，使用JavaScript来添加 active 类到对应的内容上，从而将 max-height 设置为一个较大的值来显示内容。你可以根据需要调整CSS中的样式和过渡效果。