layui的公共類:

lay-filter=" "

事件過濾器。你可能會在很多地方看到他，他一般是用于監聽特定的自定義事件。你可以把它看作是一個ID選擇器

layui的公共屬性:

layui-show屬性:顯示頁面元素

tab選項卡介紹:

tab選項卡，可用于一個界面點擊，顯示另一個界面的內容 重要

依賴加載組件：element?(請注意：必須加載element模塊，相關功能才能正常使用，詳見：內置組件 - 常用元素操作

基礎類:

layui-tab:放在div中定義一個tab選項卡

layui-tab-card:放在帶有layui-tab的div后面，表示一個卡片風格的選項卡

layui-tab-title:放在ul中定義一個選項卡菜單

layui-this:放在ul的第一個li中定義選項卡的菜單項

layui-tab-content:放在div中定義選項卡的菜單項的對應的具體內容區域

layui-tab-item:放在帶有layui-tab-content的div里面，定義每個菜單項的具體內容

layui-show:放在帶有layui-tab-item的div的第一個div里面 進入第一個菜單項頁面不用點擊直接顯示itme區域的內容

lay-allowClose屬性:你可以對父層容器(帶layui-tab的div)設置屬性?lay-allowClose="true"?來允許Tab選項卡被刪除

注意：

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

你通常需要設置過濾器，通過?element模塊的監聽tab事件來進行切換操作。詳見文檔

eg:基礎tab選項卡

開始使用layui

• 網站設置
• 用戶管理
• 權限控制

寫網站設置界面的內容寫用戶管理界面的內容寫權限控制的頁面的內容

//加載模塊

layui.use(['layer','compent','element'],function(){

var layer = layui.layer;

var element = layui.element;

layer.msg("風繼續吹!");

})

卡片風格選項卡(帶可刪除的tab)

• 網站設置
• 用戶管理
• 權限分配
• 商品管理
• 訂單管理

123456

ID焦點定位? 重點

hash(哈希)

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

• 網站設置
• 用戶管理
• 權限分配
• 商品管理
• 訂單管理

123456

標簽：layer,選項卡,Tab,layui,element,tab,div

來源： https://www.cnblogs.com/nanfengnan/p/14351514.html

總結

以上是生活随笔為你收集整理的layui tab选项卡外部html页面,layui的Tab选项卡知识的全部內容，希望文章能夠幫你解決所遇到的問題。

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