jQuery UI 实例 - 标签页（Tabs）
jQuery UI Tabs（标签页）实例
Tabs是 jQuery UI 中最常用的布局组件之一，用于在有限空间内组织多个内容面板，通过点击标签切换显示。常用于后台管理页面、商品详情（描述/参数/评价）、设置面板等。
官方演示地址：https://jqueryui.com/tabs/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1.基础标签页
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Tabs 基础示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script></head><body><divid="tabs"><ul><li><ahref="#tab1">标签 1</a></li><li><ahref="#tab2">标签 2</a></li><li><ahref="#tab3">标签 3</a></li></ul><divid="tab1"><p>这是第一个标签页的内容。</p></div><divid="tab2"><p>这是第二个标签页的内容。</p></div><divid="tab3"><p>这是第三个标签页的内容。</p></div></div><script>$(function(){$("#tabs").tabs();});</script></body></html>2.常用选项（可折叠、带图标、垂直标签页）
collapsible: true：允许全部收起。icons：标签添加图标。orientation: "vertical"：垂直标签页（需 CSS 调整）。
<divid="tabs2"><ul><li><ahref="#tab-a"><spanclass="ui-icon ui-icon-home"></span>首页</a></li><li><ahref="#tab-b"><spanclass="ui-icon ui-icon-info"></span>关于</a></li><li><ahref="#tab-c"><spanclass="ui-icon ui-icon-contact"></span>联系</a></li></ul><divid="tab-a"><p>首页内容</p></div><divid="tab-b"><p>关于我们</p></div><divid="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 加载内容 + 事件监听
标签内容从远程加载（支持缓存）。
<divid="tabs-ajax"><ul><li><ahref="content1.html">本地文件1</a></li><li><ahref="https://example.com/api/content2">远程内容2</a></li><li><ahref="#local-tab">本地内容3</a></li></ul><divid="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.排序 + 动态添加/删除标签
<buttonid="addTab">添加新标签</button><script>lettabCount=4;$("#addTab").click(function(){consttitle="新标签 "+tabCount;constcontent="<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");// 关键：刷新 tabstabCount++;});</script>小技巧：
- 排序：结合 Sortable 实现标签拖拽排序。
- 嵌套：Tabs 内可嵌套 Accordion 或其他 Tabs。
- 主题：替换 smoothness 为其他主题（如 base、redmond）。
Tabs 是页面布局利器，常与 Accordion 结合实现左侧菜单+内容区。如果你需要可关闭标签页、排序标签、或完整后台布局模板，请告诉我更多需求！