當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

007-选项卡

發布時間：2025/4/17 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 007-选项卡小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. Tab選項卡廣泛應用于Web頁面, 因此我們也對其進行了良好的支持。Layui內置多種Tab風格, 支持刪除選項卡、并提供響應式支持。

2. 選項卡依賴加載組件: element。

3. 選項卡使用

名稱	組合
默認	class="layui-tab"
選項卡標題容器	class="layui-tab-title"
指向當前選項卡標題	class="layui-this"
選項卡內容容器	class="layui-tab-content"
選項卡內容項	class="layui-tab-item"
展示選項卡內容項	class="layui-tab-item layui-show"

4. 默認Tab選項卡

4.1. 值得注意的是, 如果存在layui-tab-item的內容區域, 在切換時自動定位到對應內容。如果不存在內容區域, 則不會定位到對應內容。

4.2. 實例

5. Tab簡潔風格

5.1. 通過追加class: layui-tab-brief來設定簡潔風格。

6. Tab卡片風格

6.1. 通過追加class: layui-tab-card來設定卡片風格。

7. 帶刪除的Tab

7.1. 你可以對父層容器設置屬性lay-allowClose="true"來允許Tab選項卡被刪除。

8. ID焦點定位

8.1. 你可以通過對選項卡設置屬性lay-id="xxx"來作為唯一的匹配索引, 以用于外部的定位切換, 如后臺的左側導航、以及頁面地址hash的匹配。

8.2. 屬性lay-id是扮演這項功能的主要角色, 它是動態操作的重要憑據, 如:

8.3. 同樣的還有增加選項卡和刪除選項卡, 都需要用到lay-id。

9. 例子

9.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>選項卡 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><div class="layui-tab"><ul class="layui-tab-title"><li class="layui-this">網站設置</li><li>用戶管理</li><li>權限分配</li><li>商品管理</li><li>訂單管理</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">內容1</div><div class="layui-tab-item">內容2</div><div class="layui-tab-item">內容3</div><div class="layui-tab-item">內容4</div><div class="layui-tab-item">內容5</div></div></div><div class="layui-tab layui-tab-brief"><ul class="layui-tab-title"><li class="layui-this">網站設置</li><li>用戶管理</li><li>權限分配</li><li>商品管理</li><li>訂單管理</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">內容1</div><div class="layui-tab-item">內容2</div><div class="layui-tab-item">內容3</div><div class="layui-tab-item">內容4</div><div class="layui-tab-item">內容5</div></div></div> <div 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><div class="layui-tab-content" style="height: 100px;"><div class="layui-tab-item layui-show">1</div><div class="layui-tab-item">2</div><div class="layui-tab-item">3</div><div class="layui-tab-item">4</div><div class="layui-tab-item">5</div></div></div><div class="layui-tab" lay-allowClose="true"><ul class="layui-tab-title"><li class="layui-this">網站設置</li><li>用戶管理</li><li>權限分配</li><li>商品管理</li><li>訂單管理</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">1</div><div class="layui-tab-item">2</div><div class="layui-tab-item">3</div><div class="layui-tab-item">4</div><div class="layui-tab-item">5</div></div></div><div class="layui-tab" lay-filter="test1"><ul class="layui-tab-title"><li class="layui-this" lay-id="111" >文章列表</li><li lay-id="222">發送信息</li><li lay-id="333">權限分配</li><li lay-id="444">審核</li><li lay-id="555">訂單管理</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">1</div><div class="layui-tab-item">2</div><div class="layui-tab-item">3</div><div class="layui-tab-item">4</div><div class="layui-tab-item">5</div></div></div><script type="text/javascript">// 注意: 選項卡依賴element模塊, 否則無法進行功能性操作layui.use('element', function(){var element = layui.element;// 獲取hash來切換選項卡, 假設當前地址的hash為lay-id對應的值var layid = location.hash.replace(/^#test1=/, '');element.tabChange('test1', layid); // 假設當前地址為: http://a.com#test1=222, 那么選項卡會自動切換到"發送消息"這一項// 監聽Tab切換, 以改變地址hash值element.on('tab(test1)', function(){location.hash = 'test1='+ this.getAttribute('lay-id');});});</script></body> </html>

9.2. 效果圖

總結

以上是生活随笔為你收集整理的007-选项卡的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

选项卡