jQuery UI Tabs（标签页）实例
Tabs 是 jQuery UI 中最常用的布局组件之一，用于在有限空间内组织多个内容面板，通过点击标签切换显示。常用于后台管理页面、商品详情（描述/参数/评价）、设置面板等。
官方演示地址：https://jqueryui.com/tabs/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1. 基础标签页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs 基础示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tab1">标签 1</a></li>
<li><a href="#tab2">标签 2</a></li>
<li><a href="#tab3">标签 3</a></li>
</ul>
<div id="tab1"><p>这是第一个标签页的内容。</p></div>
<div id="tab2"><p>这是第二个标签页的内容。</p></div>
<div id="tab3"><p>这是第三个标签页的内容。</p></div>
</div>
<script>
$(function() {
$("#tabs").tabs();
});
</script>
</body>
</html>2. 常用选项（可折叠、带图标、垂直标签页）
collapsible: true：允许全部收起。icons：标签添加图标。orientation: "vertical"：垂直标签页（需 CSS 调整）。
<div id="tabs2">
<ul>
<li><a href="#tab-a"><span class="ui-icon ui-icon-home"></span>首页</a></li>
<li><a href="#tab-b"><span class="ui-icon ui-icon-info"></span>关于</a></li>
<li><a href="#tab-c"><span class="ui-icon ui-icon-contact"></span>联系</a></li>
</ul>
<div id="tab-a"><p>首页内容</p></div>
<div id="tab-b"><p>关于我们</p></div>
<div id="tab-c"><p>联系方式</p></div>
</div>
<script>
$("#tabs2").tabs({
collapsible: true, // 双击标签可收起所有
active: 1, // 默认激活第二个标签（从0开始）
heightStyle: "content" // 高度自适应内容
});
</script>
<style>
/* 垂直标签页示例（替换 orientation 选项） */
.ui-tabs-vertical { width: 600px; }
.ui-tabs-vertical .ui-tabs-nav { float: left; width: 150px; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; }
.ui-tabs-vertical .ui-tabs-panel { float: right; width: 430px; }
</style>3. AJAX 加载内容 + 事件监听
标签内容从远程加载（支持缓存）。
<div id="tabs-ajax">
<ul>
<li><a href="content1.html">本地文件1</a></li>
<li><a href="https://example.com/api/content2">远程内容2</a></li>
<li><a href="#local-tab">本地内容3</a></li>
</ul>
<div id="local-tab"><p>这是本地内容，不需要 AJAX。</p></div>
</div>
<script>
$("#tabs-ajax").tabs({
beforeLoad: function(event, ui) { // 加载前
ui.panel.html("加载中...");
},
load: function(event, ui) { // 加载完成
console.log("标签加载完成：" + ui.tab.text());
},
activate: function(event, ui) { // 切换标签时
console.log("当前标签：" + ui.newTab.text());
}
});
</script>4. 排序 + 动态添加/删除标签
<button id="addTab">添加新标签</button>
<script>
let tabCount = 4;
$("#addTab").click(function() {
const title = "新标签 " + tabCount;
const content = "<p>这是动态添加的内容 " + tabCount + "。</p>";
$("#tabs ul").append("<li><a href='#dynamic-" + tabCount + "'>" + title + "</a></li>");
$("#tabs").append("<div id='dynamic-" + tabCount + "'>" + content + "</div>");
$("#tabs").tabs("refresh"); // 关键：刷新 tabs
tabCount++;
});
</script>小技巧：
- 排序：结合 Sortable 实现标签拖拽排序。
- 嵌套：Tabs 内可嵌套 Accordion 或其他 Tabs。
- 主题：替换 smoothness 为其他主题（如 base、redmond）。
Tabs 是页面布局利器，常与 Accordion 结合实现左侧菜单+内容区。如果你需要 可关闭标签页、排序标签、或 完整后台布局模板，请告诉我更多需求！
