css手风琴效果选项卡

ziblog

已于 2025-06-27 15:47:17 修改

阅读量546

点赞数 8

CC 4.0 BY-SA版权

文章标签： css 前端 javascript

于 2025-04-21 18:01:51 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147399610

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS手风琴效果选项卡</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
background-color: #f5f5f5;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.accordion {
width: 100%;
max-width: 800px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
}

.accordion-item {
border-bottom: 1px solid #e0e0e0;
}

.accordion-item:last-child {
border-bottom: none;
}

.accordion-header {
padding: 20px;
background-color: #4a6fa5;
color: white;
cursor: pointer;
font-size: 18px;
font-weight: bold;
transition: all 0.3s ease;
position: relative;
}

.accordion-header:hover {
background-color: #3a5a8f;
}

.accordion-header::after {
content: '+';
position: absolute;
right: 20px;
font-size: 24px;
transition: all 0.3s ease;
}

.accordion-item.active .accordion-header::after {
content: '-';
}

.accordion-content {
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background-color: #f9f9f9;
}

.accordion-item.active .accordion-content {
max-height: 300px;
padding: 20px;
}

.accordion-content p {
margin-bottom: 10px;
line-height: 1.6;
color: #555;
}

/* 插入的链接样式 */
.special-link {
color: #4a6fa5;
text-decoration: none;
font-weight: bold;
}

.special-link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">选项卡1</div>
<div class="accordion-content">
<p>这是第一个选项卡的内容。手风琴效果可以让用户专注于当前查看的内容。</p>
<p>点击其他选项卡可以展开相应内容，当前选项卡会自动收起。</p>
</div>
</div>

<div class="accordion-item">
<div class="accordion-header">选项卡2</div>
<div class="accordion-content">
<p>这是第二个选项卡的内容。CSS手风琴效果纯前端实现，无需JavaScript。</p>
<p>通过CSS的:checked伪类和相邻兄弟选择器实现展开/收起效果。</p>
<p>响应式设计，在各种设备上都能良好显示。</p>
</div>
</div>

<div class="accordion-item">
<div class="accordion-header">选项卡3</div>
<div class="accordion-content">
<p>这是第三个选项卡的内容。手风琴效果常用于FAQ、产品特性展示等场景。</p>
<p>优点包括：节省空间、用户注意力集中、交互直观。</p>
<p>可以自定义颜色、动画时间和内容样式。</p>
</div>
</div>

<div class="accordion-item">
<div class="accordion-header">选项卡4</div>
<div class="accordion-content">
<p>这是第四个选项卡的内容。纯CSS实现意味着更好的性能和兼容性。</p>
<p>没有JavaScript依赖，即使在JS被禁用的情况下也能基本工作。</p>
<p>可以轻松集成到任何网站中。</p>
</div>
</div>
</div>

// 关闭所有其他选项卡
document.querySelectorAll('.accordion-item').forEach(otherItem => {
otherItem.classList.remove('active');
});

// 切换当前选项卡
if (!isActive) {
item.classList.add('active');
}
});
});
</script>
</body>
</html>