jQuery Ajax Tab选项卡网页模板

原创已于 2025-06-27 15:31:43 修改 · 581 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-04-28 15:29:50 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Ajax Tab选项卡</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1000px;
margin: 30px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 30px;
color: #2c3e50;
}
.tab-header {
display: flex;
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
}
.tab-btn {
padding: 12px 25px;
background-color: #f8f9fa;
border: none;
border-right: 1px solid #ddd;
cursor: pointer;
font-size: 16px;
transition: all 0.3s;
}
.tab-btn:last-child {
border-right: none;
}
.tab-btn:hover {
background-color: #e9ecef;
}
.tab-btn.active {
background-color: #3498db;
color: white;
font-weight: bold;
}
.tab-content {
display: none;
padding: 20px;
min-height: 300px;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.loading {
text-align: center;
padding: 50px;
font-size: 18px;
color: #7f8c8d;
}
.content-item {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dashed #eee;
}
.content-item h3 {
color: #3498db;
margin-bottom: 10px;
}
.footer {
text-align: center;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #eee;
color: #7f8c8d;
font-size: 14px;
}
.footer a {
color: #e74c3c;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery Ajax Tab选项卡</h1>

<div class="tab-header">
<button class="tab-btn active" data-tab="tab1">最新动态</button>
<button class="tab-btn" data-tab="tab2">技术文章</button>
<button class="tab-btn" data-tab="tab3">资源下载</button>
<button class="tab-btn" data-tab="tab4">关于我们</button>
</div>

<div id="tab1" class="tab-content active">
<div class="loading">加载中，请稍候...</div>
</div>

<div id="tab2" class="tab-content">
<div class="loading">加载中，请稍候...</div>
</div>

<div id="tab3" class="tab-content">
<div class="loading">加载中，请稍候...</div>
</div>

<div id="tab4" class="tab-content">
<div class="loading">加载中，请稍候...</div>
</div>

<div class="footer">

</div>
</div>

<script>
$(document).ready(function() {
// 模拟的Ajax数据
const mockData = {
tab1: [
{
title: "网站新版上线公告",
content: "经过数月的开发与测试，我们很高兴地宣布网站新版正式上线！新版采用了响应式设计，优化了用户体验，并增加了多项新功能。"
},
{
title: "2023年度开发者大会",
content: "2023年度开发者大会将于11月15日在上海举行。本次大会将聚焦前沿技术，包括人工智能、区块链和云计算等热门话题。"
},
{
title: "夏季促销活动",
content: "即日起至8月31日，所有高级会员享受7折优惠。新注册用户还可获得额外30天免费试用期。"
}
],
tab2: [
{
title: "深入理解JavaScript闭包",
content: "闭包是JavaScript中一个重要且强大的概念。本文将详细介绍闭包的工作原理、使用场景以及常见误区。"
},
{
title: "CSS Grid布局完全指南",
content: "CSS Grid布局为Web开发带来了革命性的变化。本教程将从基础到高级，全面讲解Grid布局的各种用法。"
},
{
title: "Vue 3.0新特性解析",
content: "Vue 3.0带来了Composition API、性能优化和更好的TypeScript支持。本文将详细分析这些新特性及其优势。"
}
],
tab3: [
{
title: "jQuery插件开发模板",
content: "一个标准的jQuery插件开发模板，包含最佳实践和代码规范，帮助您快速开发高质量的jQuery插件。"
},
{
title: "前端开发工具包",
content: "集成了常用前端开发工具的压缩包，包括代码编辑器、调试工具和性能分析工具等。"
},
{
title: "UI组件库",
content: "一套响应式的UI组件库，包含按钮、表单、导航等常用组件，支持自定义主题和样式。"
}
],
tab4: [
{
title: "公司简介",
content: "我们是一家专注于Web前端技术的高科技公司，致力于为客户提供优质的技术解决方案和服务。"
},
{
title: "团队介绍",
content: "我们的团队由资深前端开发工程师、UI设计师和产品经理组成，拥有丰富的行业经验和创新能力。"
},
{
title: "联系我们",
content: "地址：上海市浦东新区张江高科技园区<br>电话：021-12345678<br>邮箱：contact@example.com"
}
]
};

// 初始化加载第一个标签内容
loadTabContent('tab1');

// 标签切换事件
$('.tab-btn').on('click', function() {
const tabId = $(this).data('tab');

// 切换活动状态
$('.tab-btn').removeClass('active');
$(this).addClass('active');

// 切换内容显示
$('.tab-content').removeClass('active');
$(`#${tabId}`).addClass('active');

// 加载内容
if ($(`#${tabId}`).html().trim() === '<div class="loading">加载中，请稍候...</div>') {
loadTabContent(tabId);
}
});

// 加载标签内容函数
function loadTabContent(tabId) {
const $tabContent = $(`#${tabId}`);

// 模拟Ajax请求延迟
setTimeout(function() {
// 这里应该是实际的Ajax请求
// $.ajax({
// url: `api/${tabId}`,
// method: 'GET',
// success: function(data) {
// renderTabContent($tabContent, data);
// },
// error: function() {
// $tabContent.html('<div class="error">加载失败，请稍后再试</div>');
// }
// });

// 使用模拟数据
renderTabContent($tabContent, mockData[tabId]);
}, 500);
}

// 渲染标签内容函数
function renderTabContent($container, data) {
let html = '';

if (data && data.length > 0) {
data.forEach(item => {
html += `
<div class="content-item">
<h3>${item.title}</h3>
<p>${item.content}</p>
</div>
`;
});
} else {
html = '<div class="no-data">暂无数据</div>';
}

$container.html(html);
}
});
</script>
</body>
</html>