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中的样式和过渡效果。

相关推荐
夏梦春蝉19 分钟前
ES6从入门到精通:常用知识点
前端·javascript·es6
我想说一句28 分钟前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
南屿im36 分钟前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript
杨进军37 分钟前
前端线上问题的那些事儿
前端·javascript·前端框架
每天开心39 分钟前
深入探索 React Hooks: useState 与 useEffect 的力量 🌟
前端·javascript·ai编程
卸任1 小时前
性能优化大作战:React.memo 在可编辑列表中的奇效
前端·javascript·react.js
WildBlue1 小时前
阮一峰闭包:JavaScript最优雅的"背包"魔法!✨
前端·javascript
Dream耀1 小时前
React Hooks 指南:useState 与 useEffect 的用法与技巧
前端·javascript·react.js
zhanshuo1 小时前
i18next + 原生JS 双引擎:打造前端多语言系统最佳实践
前端·javascript·css
小飞悟1 小时前
React Hooks 编程:深入理解 useEffect 的执行机制与清理副作用
前端·javascript