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

相关推荐
Dolphin_海豚10 分钟前
一文理清 node.js 模块查找策略
javascript·后端·前端工程化
晓13133 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
海底火旺3 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
前端付豪3 小时前
15、前端可配置化系统设计:从硬编码到可视化配置
前端·javascript·架构
aPurpleBerry3 小时前
hot100 hot75 栈、队列题目思路
javascript·算法
颜漠笑年4 小时前
可迭代对象≠数组,一起来揭开for...of背后隐藏的秘密吧
前端·javascript
脑袋大大的5 小时前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君015 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
江城开朗的豌豆7 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆7 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js