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