layui的公共類:

lay-filter=" "

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

layui的公共屬性:

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

tab選項卡介紹:

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

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

基礎類:

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

layui-tab-card:放在帶有l(wèi)ayui-tab的div后面，表示一個卡片風格的選項卡

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

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

layui-tab-content:放在div中定義選項卡的菜單項的對應的具體內(nèi)容區(qū)域

layui-tab-item:放在帶有l(wèi)ayui-tab-content的div里面，定義每個菜單項的具體內(nèi)容

layui-show:放在帶有l(wèi)ayui-tab-item的div的第一個div里面 進入第一個菜單項頁面不用點擊直接顯示itme區(qū)域的內(nèi)容

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

注意：

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

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

eg:基礎tab選項卡

開始使用layui

• 網(wǎng)站設置
• 用戶管理
• 權(quán)限控制

寫網(wǎng)站設置界面的內(nèi)容寫用戶管理界面的內(nèi)容寫權(quán)限控制的頁面的內(nèi)容

//加載模塊

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

var layer = layui.layer;

var element = layui.element;

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

})

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

• 網(wǎng)站設置
• 用戶管理
• 權(quán)限分配
• 商品管理
• 訂單管理

123456

ID焦點定位? 重點

hash(哈希)

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

• 網(wǎng)站設置
• 用戶管理
• 權(quán)限分配
• 商品管理
• 訂單管理

123456

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。