单页选项卡切换模板

原创已于 2025-06-27 15:36:11 修改 · 366 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-04-25 18:01:12 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单页选项卡切换模板</title>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* 样式调整 */
.tabs { display: flex; cursor: pointer; }
.tabs div { padding: 10px; border: 1px solid #ccc; }
.tabs .active { background-color: #f0f0f0; border-bottom: none; }
.content { border: 1px solid #ccc; border-top: none; padding: 20px; display: none; }
.content.active { display: block; }
</style>
</head>
<body>

<div class="tabs">
<div class="tab active" data-target="#content1">选项卡1</div>
<div class="tab" data-target="#content2">选项卡2</div>
<div class="tab" data-target="#content3">选项卡3</div>
</div>

<div id="content1" class="content active">
<h2>内容1</h2>
<p>这是选项卡1的内容。</p>
</div>
<div id="content2" class="content">
<h2>内容2</h2>
<p>这是选项卡2的内容。</p>
</div>
<div id="content3" class="content">
<h2>内容3</h2>
<p>这是选项卡3的内容。</p>


</div>

// 设置当前选项卡为活动状态
$(this).addClass('active');

// 显示对应的内容区域
var target = $(this).data('target');
$(target).addClass('active');
});

// AJAX示例（本例中未实际使用，但展示了如何集成）
/*
$('#some-button').click(function() {
$.ajax({
url: 'your-server-endpoint',
type: 'GET',
success: function(response) {
// 处理响应数据
console.log(response);
},
error: function(xhr, status, error) {
console.error('AJAX请求失败:', status, error);
}
});
});
*/
});
</script>

</body>
</html>