本文執行個體為大家分享了layui選項卡的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>選項卡</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body><fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>預設風格的Tab</legend></fieldset><p class="layui-tab"> <ul class="layui-tab-title"> <li class="layui-this">網站設定</li> <li>使用者管理</li> <li>許可權分配</li> <li>商品管理</li> <li>訂單管理</li> </ul> <p class="layui-tab-content"> <p class="layui-tab-item layui-show"> 1. 高度預設自適應，也可以隨意固寬。 <br>2. Tab進行了響應式處理，所以無需擔心數量多少。 </p> <p class="layui-tab-item">內容2</p> <p class="layui-tab-item">內容3</p> <p class="layui-tab-item">內容4</p> <p class="layui-tab-item">內容5</p> </p></p><fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>動態操作Tab</legend></fieldset><p class="layui-tab" lay-filter="demo" lay-allowclose="true"> <ul class="layui-tab-title"> <li class="layui-this" lay-id="11">網站設定</li> <li lay-id="22">使用者管理</li> <li lay-id="33">許可權分配</li> <li lay-id="44">商品管理</li> <li lay-id="55">訂單管理</li> </ul> <p class="layui-tab-content"> <p class="layui-tab-item layui-show">內容1</p> <p class="layui-tab-item">內容2</p> <p class="layui-tab-item">內容3</p> <p class="layui-tab-item">內容4</p> <p class="layui-tab-item">內容5</p> </p></p><p class="site-demo-button" style="margin-bottom: 0;"> <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab項</button> <button class="layui-btn site-demo-active" data-type="tabDelete">刪除：商品管理</button> <button class="layui-btn site-demo-active" data-type="tabChange">切換到：使用者管理</button></p><!-- 通用-970*90 --><p> <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="6835627838"></ins></p><fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>Hash地址定位</legend></fieldset><p class="layui-tab" lay-filter="test"> <ul class="layui-tab-title"> <li class="layui-this" lay-id="11">網站設定</li> <li lay-id="22">使用者管理</li> <li lay-id="33">許可權分配</li> <li lay-id="44">商品管理</li> <li lay-id="55">訂單管理</li> </ul> <p class="layui-tab-content"> <p class="layui-tab-item layui-show"> 點擊該Tab的任一標題，觀察地址欄變化，再重新整理頁面。選項卡將會自動定位到上一次切換的項 </p> <p class="layui-tab-item">內容2</p> <p class="layui-tab-item">內容3</p> <p class="layui-tab-item">內容4</p> <p class="layui-tab-item">內容5</p> </p></p><fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>簡潔風格的Tab</legend></fieldset><p class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> <ul class="layui-tab-title"> <li class="layui-this">網站設定</li> <li>使用者管理</li> <li>許可權分配</li> <li>商品管理</li> <li>訂單管理</li> </ul> <p class="layui-tab-content" style="height: 100px;"> <p class="layui-tab-item layui-show">內容不一樣是要有，因為你可以監聽tab事件（閱讀下文檔就是了）</p> <p class="layui-tab-item">內容2</p> <p class="layui-tab-item">內容3</p> <p class="layui-tab-item">內容4</p> <p class="layui-tab-item">內容5</p> </p></p><fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>卡片風格的Tab</legend></fieldset><p class="layui-tab layui-tab-card"> <ul class="layui-tab-title"> <li class="layui-this">網站設定</li> <li>使用者管理</li> <li>許可權分配</li> <li>商品管理</li> <li>訂單管理</li> </ul> <p class="layui-tab-content" style="height: 100px;"> <p class="layui-tab-item layui-show">預設寬度是相對於父元素100%適應的，你也可以固定寬度。</p> <p class="layui-tab-item">2</p> <p class="layui-tab-item">3</p> <p class="layui-tab-item">4</p> <p class="layui-tab-item">5</p> <p class="layui-tab-item">6</p> </p></p><fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>當Tab數超過一定寬度</legend></fieldset><p class="layui-tab layui-tab-card" style="width: 290px;"> <ul class="layui-tab-title"> <li class="layui-this">網站設定</li> <li>使用者管理</li> <li>許可權分配</li> <li>商品管理</li> <li>訂單管理</li> </ul> <p class="layui-tab-content" style="height: 100px;"> <p class="layui-tab-item layui-show"> 1. 寬度足夠，就不會出現右標；寬度不夠，就會開啟展開功能。 <br>2. 如果你的寬度是自適應的，Tab會自動判斷是否需要展開，並適用於所有風格。 </p> <p class="layui-tab-item">2</p> <p class="layui-tab-item">3</p> <p class="layui-tab-item">4</p> <p class="layui-tab-item">5</p> <p class="layui-tab-item">6</p> </p></p><fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>帶刪除功能的Tab</legend></fieldset><p class="layui-tab layui-tab-card" lay-allowclose="true"> <ul class="layui-tab-title"> <li class="layui-this">網站設定</li> <li>使用者基本管理</li> <li>許可權分配</li> <li>商品管理</li> <li>訂單管理</li> </ul> <p class="layui-tab-content" style="height: 150px;"> <p class="layui-tab-item layui-show"> 1. 我個人比較喜歡卡片風格的，所以你發現又是以卡片的風格舉例 2. 刪除功能適用於所有風格 </p> <p class="layui-tab-item">2</p> <p class="layui-tab-item">3</p> <p class="layui-tab-item">4</p> <p class="layui-tab-item">5</p> <p class="layui-tab-item">6</p> </p></p><script src="layui/layui.js" charset="utf-8"></script><script>layui.use('element', function(){ var $ = layui.jquery ,element = layui.element(); //Tab的切換功能，切換事件監聽等，需要依賴element模組 //觸發事件 var active = { tabAdd: function(){ //新增一個Tab項 element.tabAdd('demo', { title: '新選項'+ (Math.random()*1000|0) //用於示範 ,content: '內容'+ (Math.random()*1000|0) ,id: new Date().getTime() //實際使用一般是規定好的id，這裡以時間戳記類比下 }) } ,tabDelete: function(othis){ //刪除指定Tab項 element.tabDelete('demo', '44'); //刪除：“商品管理” othis.addClass('layui-btn-disabled'); } ,tabChange: function(){ //切換到指定Tab項 element.tabChange('demo', '22'); //切換到：使用者管理 } }; $('.site-demo-active').on('click', function(){ var othis = $(this), type = othis.data('type'); active[type] ? active[type].call(this, othis) : ''; }); //Hash地址的定位 var layid = location.hash.replace(/^#test=/, ''); element.tabChange('test', layid); element.on('tab(test)', function(elem){ location.hash = 'test='+ $(this).attr('lay-id'); });});</script> </body></html>
：
以上就是本篇文章的所有內容了，希望對大家學習layui提供到協助！！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
