docs(tabs): 新增「打乱标签顺序」示例

docs/tabs/detail/demo.md

@@ -38,6 +38,16 @@
   </textarea>
 </pre>
 
+<h3 id="demo-shuffle" lay-toc="{level: 2}">打乱标签顺序</h3>
+
+<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'max-height: 520px;', tools: ['full'], done: function(obj){
+  obj.render();
+}}">
+  <textarea>
+{{- d.include("/tabs/examples/shuffle.md") }}
+  </textarea>
+</pre>
+
 <h3 id="demo-hash" lay-toc="{level: 2, title: 'HASH 匹配'}">通过 HASH 匹配选中标签</h3>
 
 切换 tabs 标签项后，地址栏同步 `hash` 值，当页面刷新时，tabs 仍保持对应的切换状态。

docs/tabs/examples/shuffle.md

@@ -0,0 +1,22 @@
+<div class="layui-tabs" lay-options="{closable: true}">
+  <ul class="layui-tabs-header">
+    <li lay-id="fff">Tab6</li>
+    <li lay-id="eee">Tab5</li>
+    <li lay-id="ccc">Tab3</li>
+    <li lay-id="bbb">Tab2</li>
+    <li lay-id="aaa">Tab1</li>
+    <li lay-id="ddd">Tab4</li>
+  </ul>
+  <div class="layui-tabs-body">
+    <div class="layui-tabs-item" lay-id="aaa">Tab Content-1</div>
+    <div class="layui-tabs-item" lay-id="bbb">Tab Content-2</div>
+    <div class="layui-tabs-item" lay-id="ccc">Tab Content-3</div>
+    <div class="layui-tabs-item" lay-id="ddd">Tab Content-4</div>
+    <div class="layui-tabs-item" lay-id="eee">Tab Content-5</div>
+    <div class="layui-tabs-item" lay-id="fff">Tab Content-6</div>
+  </div>
+</div>
+
+🔔 提示：即 tabs 能通过 `lay-id` 匹配对应的标签头和标签内容。
+
+<!-- import layui -->