<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15种选项卡切换特效</title>
<style>
/* 基础样式 */
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
h1, h2 {
color: #2c3e50;
text-align: center;
}
.container {
margin-bottom: 50px;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.tab-container {
margin-bottom: 40px;
}
.tab-header {
display: flex;
margin-bottom: -1px;
}
.tab-content {
padding: 20px;
border: 1px solid #ddd;
background: white;
min-height: 150px;
}
.tab-btn {
padding: 10px 20px;
background: #f1f1f1;
border: 1px solid #ddd;
cursor: pointer;
transition: all 0.3s;
outline: none;
}
.tab-btn.active {
background: white;
border-bottom: 1px solid white;
}
/* 特效1: 经典选项卡 */
.effect1 .tab-btn.active {
background: #3498db;
color: white;
border-color: #3498db;
}
/* 特效2: 下划线效果 */
.effect2 .tab-btn {
background: none;
border: none;
position: relative;
}
.effect2 .tab-btn.active:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #e74c3c;
}
/* 特效3: 圆角选项卡 */
.effect3 .tab-btn {
border-radius: 10px 10px 0 0;
margin-right: 5px;
}
.effect3 .tab-btn.active {
background: #2ecc71;
color: white;
}
/* 特效4: 图标选项卡 */
.effect4 .tab-btn {
display: flex;
align-items: center;
}
.effect4 .tab-btn i {
margin-right: 8px;
font-size: 18px;
}
.effect4 .tab-btn.active {
background: #9b59b6;
color: white;
}
/* 特效5: 垂直选项卡 */
.effect5 .tab-header {
flex-direction: column;
width: 150px;
float: left;
}
.effect5 .tab-btn {
text-align: left;
border-radius: 0;
border-right: none;
}
.effect5 .tab-content {
margin-left: 150px;
border-left: none;
}
.effect5::after {
content: '';
display: table;
clear: both;
}
/* 特效6: 滑动下划线 */
.effect6 .tab-header {
position: relative;
}
.effect6 .underline {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: #f39c12;
transition: all 0.3s;
}
.effect6 .tab-btn {
background: none;
border: none;
}
/* 特效7: 卡片式选项卡 */
.effect7 .tab-header {
margin-bottom: 10px;
}
.effect7 .tab-btn {
border-radius: 5px;
margin-right: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.effect7 .tab-btn.active {
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transform: translateY(-3px);
}
/* 特效8: 渐变背景 */
.effect8 .tab-btn {
background: linear-gradient(to bottom, #f1f1f1, #e1e1e1);
}
.effect8 .tab-btn.active {
background: linear-gradient(to bottom, #3498db, #2980b9);
color: white;
}
/* 特效9: 3D效果 */
.effect9 .tab-btn {
border-bottom: none;
transform: perspective(100px) rotateX(20deg);
transform-origin: bottom;
}
.effect9 .tab-btn.active {
transform: perspective(100px) rotateX(0);
z-index: 1;
}
/* 特效10: 圆点指示器 */
.effect10 .tab-btn {
position: relative;
padding-left: 30px;
background: none;
border: none;
}
.effect10 .tab-btn:before {
content: '';
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: #ccc;
}
.effect10 .tab-btn.active:before {
background: #e74c3c;
}
/* 特效11: 边框动画 */
.effect11 .tab-btn {
position: relative;
background: none;
border: none;
overflow: hidden;
}
.effect11 .tab-btn:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #27ae60;
transition: width 0.3s;
}
.effect11 .tab-btn.active:after {
width: 100%;
}
/* 特效12: 缩放效果 */
.effect12 .tab-btn {
transition: transform 0.3s;
}
.effect12 .tab-btn.active {
transform: scale(1.1);
z-index: 1;
}
/* 特效13: 翻转效果 */
.effect13 .tab-header {
perspective: 1000px;
}
.effect13 .tab-btn {
transform-style: preserve-3d;
transition: transform 0.6s;
background: none;
border: none;
}
.effect13 .tab-btn.active {
transform: rotateX(180deg);
background: #34495e;
color: white;
}
/* 特效14: 颜色填充 */
.effect14 .tab-btn {
position: relative;
z-index: 1;
background: none;
border: none;
overflow: hidden;
}
.effect14 .tab-btn:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #8e44ad;
z-index: -1;
transition: width 0.3s;
}
.effect14 .tab-btn.active:before {
width: 100%;
}
.effect14 .tab-btn.active {
color: white;
}
/* 特效15: 现代简约 */
.effect15 .tab-header {
border-bottom: 2px solid #3498db;
}
.effect15 .tab-btn {
background: none;
border: none;
margin-right: 30px;
padding: 10px 0;
position: relative;
}
.effect15 .tab-btn.active {
color: #3498db;
}
.effect15 .tab-btn.active:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: #3498db;
}
/* 响应式设计 */
@media (max-width: 768px) {
.tab-header {
flex-wrap: wrap;
}
.tab-btn {
flex: 1;
min-width: 100px;
}
.effect5 .tab-header {
width: 100%;
float: none;
}
.effect5 .tab-content {
margin-left: 0;
}
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<h1>15种选项卡切换特效</h1>
<!-- 特效1: 经典选项卡 -->
<div class="container">
<h2>1. 经典选项卡</h2>
<div class="tab-container effect1">
<div class="tab-header">
<button class="tab-btn active" data-tab="tab1-1">选项一</button>
<button class="tab-btn" data-tab="tab1-2">选项二</button>
<button class="tab-btn" data-tab="tab1-3">选项三</button>
</div>
<div class="tab-content" id="tab1-1">
<h3>内容一</h3>
<p>这是经典选项卡的第一个内容区域。点击其他选项卡可以切换内容。</p>
</div>
<div class="tab-content" id="tab1-2" style="display: none;">
<h3>内容二</h3>
<p>这是经典选项卡的第二个内容区域。</p>
</div>
<div class="tab-content" id="tab1-3" style="display: none;">
<h3>内容三</h3>
<p>这是经典选项卡的第三个内容区域。</p>
</div>
</div>
</div>
<!-- 特效2: 下划线效果 -->
<div class="container">
<h2>2. 下划线效果</h2>
<div class="tab-container effect2">
<div class="tab-header">
<button class="tab-btn active" data-tab="tab2-1">首页</button>
<button class="tab-btn" data-tab="tab2-2">产品</button>
<button class="tab-btn" data-tab="tab2-3">服务</button>
<button class="tab-btn" data-tab="tab2-4">关于</button>
</div>
<div class="tab-content" id="tab2-1">
<h3>欢迎来到我们的网站</h3>
<p>这是带有下划线效果的选项卡，当前选中项会有红色下划线。</p>
</div>
<div class="tab-content" id="tab2-2" style="display: none;">
<h3>我们的产品</h3>
<p>展示我们所有的产品和服务。</p>
</div>
<div class="tab-content" id="tab2-3" style="display: none;">
<h3>专业服务</h3>
<p>我们提供专业的服务和支持。</p>
</div>
<div class="tab-content" id="tab2-4" style="display: none;">
<h3>关于我们</h3>
<p>了解我们的团队和公司历史。</p>
</div>
</div>
</div>
<!-- 特效3: 圆角选项卡 -->
<div class="container">
<h2>3. 圆角选项卡</h2>
<div class="tab-container effect3">
<div class="tab-header">
<button class="tab-btn active" data-tab="tab3-1">新闻</button>
<button class="tab-btn" data-tab="tab3-2">体育</button>
<button class="tab-btn" data-tab="tab3-3">娱乐</button>
<button class="tab-btn" data-tab="tab3-4">科技</button>
</div>
<div class="tab-content" id="tab3-1">
<h3>今日新闻</h3>
<p>最新的国内外新闻动态。</p>
</div>
<div class="tab-content" id="tab3-2" style="display: none;">
<h3>体育赛事</h3>
<p>各大体育赛事的最新结果和报道。</p>
</div>
<div class="tab-content" id="tab3-3" style="display: none;">
<h3>娱乐八卦</h3>
<p>娱乐圈的最新动态和明星新闻。</p>
</div>
<div class="tab-content" id="tab3-4" style="display: none;">
<h3>科技前沿</h3>
<p>科技行业的最新发展和创新。</p>
</div>
</div>
</div>
<!-- 特效4: 图标选项卡 -->
<div class="container">
<h2>4. 图标选项卡</h2>
<div class="tab-container effect4">
<div class="tab-header">
<button class="tab-btn active" data-tab="tab4-1"><i class="fas fa-home"></i> 首页</button>
<button class="tab-btn" data-tab="tab4-2"><i class="fas fa-shopping-cart"></i> 购物</button>
<button class="tab-btn" data-tab="tab4-3"><i class="fas fa-envelope"></i> 消息</button>
<button class="tab-btn" data-tab="tab4-4"><i class="fas fa-cog"></i> 设置</button>
</div>
<div class="tab-content" id="tab4-1">
<h3>欢迎页面</h3>
<p>带有Font Awesome图标的选项卡效果。</p>
</div>
<div class="tab-content" id="tab4-2" style="display: none;">
<h3>购物中心</h3>
<p>浏览和购买我们的产品。</p>
</div>
<div class="tab-content" id="tab4-3" style="display: none;">
<h3>消息中心</h3>
<p>查看您的消息和通知。</p>
</div>
<div class="tab-content" id="tab4-4" style="display: none;">
<h3>系统设置</h3>
<p>自定义您的偏好设置。</p>
</div>
</div>
</div>
<!-- 特效5: 垂直选项卡 -->
<div class="container">
<h2>5. 垂直选项卡</h2>
<div class="tab-container effect5">
<div class="tab-header">
<button class="tab-btn active" data-tab="tab5-1">个人资料</button>
<button class="tab-btn" data-tab="tab5-2">账户设置</button>
<button class="tab-btn" data-tab="tab5-3">隐私设置</button>
<button class="tab-btn" data-tab="tab5-4">通知设置</button>
</div>
<div class="tab-content" id="tab5-1">
<h3>个人资料</h3>
<p>编辑和管理您的个人资料信息。</p>
</div>
<div class="tab-content" id="tab5-2" style="display: none;">
<h3>账户设置</h3>
<p>更改密码和安全设置。</p>
</div>
<div class="tab-content" id="tab5-3" style="display: none;">
<h3>隐私设置</h3>
<p>控制谁可以看到您的信息。</p>
</div>
<div class="tab-content" id="tab5-4" style="display: none;">
<h3>通知设置</h3>
<p>管理您接收的通知类型。</p>
</div>
</div>
</div>
<!-- 特效6: 滑动下划线 -->
<div class="container">
<h2>6. 滑动下划线</h2>
<div class="tab-container effect6">
<div class="tab-header">
<div class="underline" id="underline6"></div>
<button class="tab-btn active" data-tab="tab6-1">最新</button>
<button class="tab-btn" data-tab="tab6-2">热门</button>
<button class="tab-btn" data-tab="tab6-3">推荐</button>
</div>
<div class="tab-content" id="tab6-1">
<h3>最新内容</h3>
<p>滑动下划线会平滑地移动到当前选中的选项卡下方。</p>
</div>
<div class="tab-content" id="tab6-2" style="display: none;">
<h3>热门内容</h3>
<p>这是当前最受欢迎的内容。</p>
</div>
<div class="tab-content" id="tab6-3" style="display: none;">
<h3>推荐内容</h3>
<p>根据您的兴趣推荐的内容。</p>
</div>
</div>
</div>
<!-- 特效7: 卡片式选项卡 -->
<div class="container">
<h2>7. 卡片式选项卡</h2>
<div class="tab-container effect7">
<div class="tab-header">
<button class="tab-btn active" data-tab="tab7-1">设计</button>
<button class="tab-btn" data-tab="tab7-2">开发</button>
<button class="tab-btn" data-tab="tab7-3">营销</button>
</div>
<div class="tab-content" id="tab7-1">
<h3>设计服务</h3>
<p>我们提供专业的UI/UX设计服务。</p>
</div>
<div class="tab-content" id="tab7-2" style="display: none;">
<h3>开发服务</h3>
<p>前端和后端开发解决方案。</p>
</div>
<div class="tab-content" id="tab7-3" style="display: none;">
<h3>营销服务</h3>
<p>数字营销和品牌推广策略。</p>
</div>
</div>
</div>
<!-- 特效8: 渐变背景 -->
<div class="container">
<h2>8. 渐变背景</h2>
<div class="tab-container effect8">
<div class="tab-header">
<button class="tab-btn active" data-tab="tab8-1">春季</button>
<button class="tab-btn" data-tab="tab8-2">夏季</button>
<button class="tab-btn" data-tab="tab8-3">秋季</button>
<button class="tab-btn" data-tab="tab8-4">冬季</button>
</div>
<div class="tab-content" id="tab8-1">
<h3>春季活动</h3>
<p>春天是万物复苏的季节，我们有一系列春季特别活动。</p>
</div>
<div class="tab-content" id="tab8-2" style="display: none;">
<h3>夏季活动</h3>
<p>炎炎夏日，我们有清凉的夏季促销活动。</p>
</div>
<div class="tab-content" id="tab8-3" style="display: none;">
<h3>秋季活动</h3>
<p>金秋时节，收获的季节有特别的优惠。</p>
</div>
<div class="tab-content" id="tab8-4" style="display: none;">
<h3>冬季活动</h3>
<p>寒冷的冬天，我们有温暖的冬季特惠。</p>
</div>
</div>
</div>
<!-- 特效9: 3D效果 -->
<div class="container">
<h2>9. 3D效果</h2>
<div class="tab-container effect9">
<div class="tab-header">
<button class="tab-btn active" data-tab="tab9-1">3D视图</button>
<button class="tab-btn" data-tab="tab9-2">平面视图</button>
<button class="tab-btn" data-tab="tab9-3">透视视图</button>
</div>
<div class="tab-content" id="tab9-1">
<h3>3D视图</h3>
<p>选中的选项卡会有3D翻转效果。</p>
</div>
<div class="tab-content" id="tab9-2" style="display: none;">
<h3>平面视图</h3>
<p>这是平面视图的内容区域。</p>
</div>
<div class="tab-content" id="tab9-3" style="display: none;">
<h3>透视视图</h3>
<p>这是透视视图的内容区域。</p>
</div>
</div>
</div>
<!-- 特效10: 圆点指示器 -->
<div class="container">
<h2>10. 圆点指示器</h2>
<div class="tab-container effect10">
<div class="tab-header">
<button class="tab-btn active" data-tab="tab10-1">收件箱</button>
<button class="tab-btn" data-tab="tab10-2">已发送</button>
<button class="tab-btn" data-tab="tab10-3">草稿</button>
<button class="tab-btn" data-tab="tab10-4">垃圾邮件</button>
</div>
<div class="tab-content" id="tab10-1">
<h3>收件箱</h3>
<p>您的新邮件会显示在这里。</p>
</div>
<div class="tab-content" id="tab10-2" style="display: none;">
<h3>已发送</h3>
<p>查看您发送的邮件。</p>
</div>
<div class="tab-content" id="tab10-3" style="display: none;">
<h3>草稿</h3>
<p>保存为草稿的邮件。</p>
</div>
<div class="tab-content" id="tab10-4" style="display: none;">
<h3>垃圾邮件</h3>
<p>系统识别的垃圾邮件。</p>
</div>
</div>
</div>
<!-- 特效11: 边框动画 -->
<div class="container">
<h2>11. 边框动画</h2>
<div class="tab-container effect11">
<div class="tab-header">
<button class="tab-btn active" data-tab="tab11-1">动画</button>
<button class="tab-btn" data-tab="tab11-2">过渡</button>
<button class="tab-btn" data-tab="tab11-3">效果</button>
</div>
<div class="tab-content" id="tab11-1">
<h3>动画效果</h3>
<p>选项卡切换时有边框动画效果。</p>
</div>
<div class="tab-content" id="tab11-2" style="display: none;">
<h3>过渡效果</h3>
<p>平滑的过渡动画。</p>
</div>
<div class="tab-content" id="tab11-3" style="display: none;">
<h3>视觉效果</h3>
<p>各种视觉特效展示。</p>
</div>
</div>
</div>
<!-- 特效12: 缩放效果 -->
<div class="container">
<h2>12. 缩放效果</h2>
<div class="tab-container effect12">
<div class="tab-header">
<button class="tab-btn active" data-tab="tab12-1">小</button>
<button class="tab-btn" data-tab="tab12-2">中</button>
<button class="tab-btn" data-tab="tab12-3">大</button>
</div>
<div class="tab-content" id="tab12-1">
<h3>小尺寸</h3>
<p>选中的选项卡会有轻微的放大效果。</p>
</div>
<div class="tab-content" id="tab12-2" style="display: none;">
<h3>中尺寸</h3>
<p>这是中等大小的内容区域。</p>
</div>
<div class="tab-content" id="tab12-3" style="display: none;">
<h3>大尺寸</h3>
<p>这是最大尺寸的内容区域。</p>
</div>
</div>
</div>
<!-- 特效13: 翻转效果 -->
<div class="container">
<h2>13. 翻转效果</h2>
<div class="tab-container effect13">
<div class="tab-header">
<button class="tab-btn active" data-tab="tab13-1">正面</button>
<button class="tab-btn" data-tab="tab13-2">背面</button>
</div>
<div class="tab-content" id="tab13-1">
<h3>正面内容</h3>
<p>点击选项卡会有3D翻转效果。</p>
</div>
<div class="tab-content" id="tab13-2" style="display: none;">
<h3>背面内容</h3>
<p>这是翻转后的背面内容。</p>
</div>
</div>
</div>
<!-- 特效14: 颜色填充 -->
<div class="container">
<h2>14. 颜色填充</h2>
<div class="tab-container effect14">
<div class="tab-header">
<button class="tab-btn active" data-tab="tab14-1">红色</button>
<button class="tab-btn" data-tab="tab14-2">绿色</button>
<button class="tab-btn" data-tab="tab14-3">蓝色</button>
</div>
<div class="tab-content" id="tab14-1">
<h3>红色主题</h3>
<p>选中时选项卡会从左到右填充颜色。</p>
</div>
<div class="tab-content" id="tab14-2" style="display: none;">
<h3>绿色主题</h3>
<p>这是绿色主题的内容区域。</p>
</div>
<div class="tab-content" id="tab14-3" style="display: none;">
<h3>蓝色主题</h3>
<p>这是蓝色主题的内容区域。</p>
</div>
</div>
</div>
<!-- 特效15: 现代简约 -->
<div class="container">
<h2>15. 现代简约</h2>
<div class="tab-container effect15">
<div class="tab-header">
<button class="tab-btn active" data-tab="tab15-1">简约</button>
<button class="tab-btn" data-tab="tab15-2">现代</button>
<button class="tab-btn" data-tab="tab15-3">设计</button>
</div>
<div class="tab-content" id="tab15-1">
<h3>简约风格</h3>
<p>简洁明了的设计风格。</p>
</div>
<div class="tab-content" id="tab15-2" style="display: none;">
<h3>现代风格</h3>
<p>时尚现代的UI设计。</p>
</div>
<div class="tab-content" id="tab15-3" style="display: none;">
<h3>设计理念</h3>
<p>我们的设计哲学和理念。</p>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 通用选项卡切换函数
function setupTabs(containerClass) {
const containers = document.querySelectorAll('.' + containerClass);
containers.forEach(container => {
const tabs = container.querySelectorAll('.tab-btn');
const underline = container.querySelector('.underline');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
// 移除所有active类
tabs.forEach(t => t.classList.remove('active'));
// 添加active类到当前选项卡
this.classList.add('active');
// 隐藏所有内容
const tabContents = container.querySelectorAll('.tab-content');
tabContents.forEach(content => {
content.style.display = 'none';
});
// 显示当前内容
const tabId = this.getAttribute('data-tab');
document.getElementById(tabId).style.display = 'block';
// 处理滑动下划线
if (underline) {
const tabRect = this.getBoundingClientRect();
const containerRect = container.querySelector('.tab-header').getBoundingClientRect();
underline.style.width = tabRect.width + 'px';
underline.style.left = (tabRect.left - containerRect.left) + 'px';
}
// 处理特效14的颜色填充
if (containerClass === 'effect14') {
const activeTab = container.querySelector('.tab-btn.active');
const colorMap = {
'tab14-1': '#e74c3c',
'tab14-2': '#2ecc71',
'tab14-3': '#3498db'
};
const color = colorMap[tabId] || '#8e44ad';
activeTab.style.setProperty('--active-color', color);
activeTab.querySelector('::before').style.background = color;
}
});
});
});
}
// 初始化所有选项卡
for (let i = 1; i <= 15; i++) {
setupTabs('effect' + i);
}
// 初始化滑动下划线位置
const underline6 = document.getElementById('underline6');
if (underline6) {
const firstTab6 = document.querySelector('.effect6 .tab-btn.active');
if (firstTab6) {
const tabRect = firstTab6.getBoundingClientRect();
const containerRect = document.querySelector('.effect6 .tab-header').getBoundingClientRect();
underline6.style.width = tabRect.width + 'px';
underline6.style.left = (tabRect.left - containerRect.left) + 'px';
}
}
});
</script>
</body>
</html>
扫一扫
9083
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
