jQuery彩色动画Tabs选项卡

原创已于 2025-06-26 16:49:24 修改 · 570 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-25 17:34:20 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery彩色动画Tabs选项卡</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
background: #f5f5f5;
padding: 40px;
}

.tabs-container {
max-width: 800px;
margin: 0 auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
}

.tabs-header {
display: flex;
background: linear-gradient(90deg, #3498db, #9b59b6);
position: relative;
}

.tab-btn {
flex: 1;
padding: 15px 20px;
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
z-index: 1;
border: none;
background: transparent;
font-size: 16px;
}

.tab-btn.active {
color: white;
}

.tab-indicator {
position: absolute;
bottom: 0;
left: 0;
height: 100%;
background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: 0;
}

.tabs-content {
background: white;
padding: 30px;
position: relative;
min-height: 200px;
}

.tab-panel {
position: absolute;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
}

.tab-panel.active {
position: relative;
opacity: 1;
transform: translateY(0);
}

.tab-panel h2 {
color: #2c3e50;
margin-bottom: 15px;
}

.tab-panel p {
color: #7f8c8d;
line-height: 1.6;
}

/* 不同标签颜色 */
.tab-btn:nth-child(1).active ~ .tab-indicator {
background: #e74c3c;
}

.tab-btn:nth-child(2).active ~ .tab-indicator {
background: #2ecc71;
}

.tab-btn:nth-child(3).active ~ .tab-indicator {
background: #f39c12;
}

.tab-btn:nth-child(4).active ~ .tab-indicator {
background: #9b59b6;
}
</style>
</head>
<body>
<div class="tabs-container">
<div class="tabs-header">
<button class="tab-btn active">首页</button>
<button class="tab-btn">产品</button>
<button class="tab-btn">服务</button>
<button class="tab-btn">关于</button>
<div class="tab-indicator"></div>
</div>

<div class="tabs-content">
<div class="tab-panel active">
<h2>欢迎来到我们的网站</h2>
<p>这里是首页内容区域。您可以在这里展示最重要的信息或最新动态。选项卡切换效果使用了jQuery和CSS3动画，具有流畅的过渡效果。</p>
</div>

<div class="tab-panel">
<h2>我们的产品</h2>
<p>这里展示产品相关内容。每个选项卡都有不同的颜色标识，点击时会有彩色动画效果。产品页面可以详细介绍您的各种产品和服务。</p>
</div>

<div class="tab-panel">
<h2>专业服务</h2>
<p>这里展示服务相关内容。选项卡指示器会根据当前激活的标签自动移动并改变颜色，为用户提供直观的视觉反馈。</p>
</div>

<div class="tab-panel">
<h2>关于我们</h2>
<p>这里展示关于我们的信息。这个彩色动画Tabs选项卡特效完全响应式，适合在各种设备上使用。</p>
</div>
</div>
</div>


<script>
$(document).ready(function() {
// 初始化指示器位置
function initIndicator() {
const $activeTab = $('.tab-btn.active');
const left = $activeTab.position().left;
const width = $activeTab.outerWidth();

$('.tab-indicator').css({
'left': left,
'width': width
});
}

// 切换标签页
function switchTab(index) {
// 更新按钮状态
$('.tab-btn').removeClass('active');
$('.tab-btn').eq(index).addClass('active');

// 更新内容面板
$('.tab-panel').removeClass('active');
$('.tab-panel').eq(index).addClass('active');

// 动画移动指示器
const $activeTab = $('.tab-btn.active');
const left = $activeTab.position().left;
const width = $activeTab.outerWidth();

$('.tab-indicator').css({
'left': left,
'width': width
});
}

// 初始化
initIndicator();

// 绑定点击事件
$('.tab-btn').click(function() {
const index = $(this).index();
switchTab(index);
});

// 窗口大小改变时重新定位指示器
$(window).resize(function() {
initIndicator();
});
});
</script>
</body>
</html>