layerui代碼控制tab選項(xiàng)卡,添加,關(guān)閉的實(shí)例
廢話不多說,直接上代碼吧!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link href="layui/css/layui.css" rel="external nofollow" rel="stylesheet" /> <script src="layui/layui.js"></script> <!-- 注意:如果你直接復(fù)制所有代碼到本地,上述css路徑需要改成你本地的 --> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo">layui 后臺布局</div> <!-- 頭部區(qū)域(可配合layui已有的水平導(dǎo)航) --> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item"><a href="">控制臺</a></li> <li class="layui-nav-item"><a href="">商品管理</a></li> <li class="layui-nav-item"><a href="">用戶</a></li> <li class="layui-nav-item"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >其它系統(tǒng)</a> <dl class="layui-nav-child"> <dd><a href="">郵件管理</a></dd> <dd><a href="">消息管理</a></dd> <dd><a href="">授權(quán)管理</a></dd> </dl> </li> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 賢心 </a> <dl class="layui-nav-child"> <dd><a href="">基本資料</a></dd> <dd><a href="">安全設(shè)置</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">退了</a></li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左側(cè)導(dǎo)航區(qū)域(可配合layui已有的垂直導(dǎo)航) --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >所有商品</a> <dl class="layui-nav-child"> <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >列表一</a></dd> <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >列表二</a></dd> <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >列表三</a></dd> <dd><a href="">超鏈接</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >解決方案</a> <dl class="layui-nav-child"> <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >列表一</a></dd> <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >列表二</a></dd> <dd><a href="">超鏈接</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">云市場</a></li> <li class="layui-nav-item"><a href="">發(fā)布商品</a></li> </ul> </div> </div> <div class="layui-body"> <div style="padding: 3px;"> <div class="layui-tab" lay-filter="demo" > <ul class="layui-tab-title" > <li class="layui-this" lay-id="11" id="11">網(wǎng)站設(shè)置 </li> <li lay-id="22">用戶管理 <i class="layui-icon layui-unselect layui-tab-close">ဆ</i></li> <li lay-id="33">權(quán)限分配</li> <li lay-id="44">商品管理</li> <li lay-id="55">訂單管理</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">內(nèi)容1</div> <div class="layui-tab-item">內(nèi)容2</div> <div class="layui-tab-item">內(nèi)容3</div> <div class="layui-tab-item">內(nèi)容4</div> <div class="layui-tab-item">內(nèi)容5</div> </div> </div> <div class="site-demo-button" style="margin-bottom: 0;"> <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab項(xiàng)</button> <button class="layui-btn site-demo-active" data-type="tabDelete">刪除:商品管理</button> <button class="layui-btn site-demo-active" data-type="tabChange">切換到:用戶管理</button> </div> </div> </div> </div> <!-- 注意:如果你直接復(fù)制所有代碼到本地,上述js路徑需要改成你本地的 --> <script> layui.use('element', function () { var $ = layui.jquery , element = layui.element; //Tab的切換功能,切換事件監(jiān)聽等,需要依賴element模塊 //觸發(fā)事件 var active = { tabAdd: function () { //新增一個Tab項(xiàng) element.tabAdd('demo', { title: '新選項(xiàng)<i class="layui-icon layui-unselect layui-tab-close">ဆ</i>' //用于演示 , content: '內(nèi)容' + (Math.random() * 1000 | 0) , id: new Date().getTime() //實(shí)際使用一般是規(guī)定好的id,這里以時間戳模擬下 }); //增加點(diǎn)擊關(guān)閉事件 var r = $(".layui-tab-title").find("li"); //每次新打開tab都是最后一個,所以只對最后一個tab添加點(diǎn)擊關(guān)閉事件 r.eq(r.length - 1).children("i").on("click", function () { alert($(this).parent("li").attr('lay-id')); element.tabDelete("demo", $(this).parent("li").attr('lay-id')); }), element.tabChange("demo", r.length - 1); element.init(); } , tabDelete: function (othis) { //刪除指定Tab項(xiàng) element.tabDelete('demo', '44'); //刪除:“商品管理” othis.addClass('layui-btn-disabled'); } , tabChange: function () { //切換到指定Tab項(xiàng) 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>
以上這篇layerui代碼控制tab選項(xiàng)卡,添加,關(guān)閉的實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
ES6中數(shù)組array新增方法實(shí)例總結(jié)
這篇文章主要介紹了ES6中數(shù)組array新增方法,結(jié)合實(shí)例形式總結(jié)分析了ES6中數(shù)組array各種新增方法的功能及使用技巧,需要的朋友可以參考下2017-11-11原生js實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制內(nèi)容到剪切板
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制內(nèi)容到剪切板,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11JavaScript的Set數(shù)據(jù)結(jié)構(gòu)詳解
這篇文章主要為大家介紹了JavaScript的Set數(shù)據(jù)結(jié)構(gòu),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-01-01uniapp實(shí)現(xiàn)tabs切換(可滑動)效果實(shí)例
這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)tabs切換(可滑動)效果的相關(guān)資料,tabs切換無論是在app端還是小程序或者H5頁面都是很常見的功能,文中通過實(shí)例代碼介紹的很詳細(xì),需要的朋友可以參考下2023-07-07javascript獲取以及設(shè)置光標(biāo)位置
本文介紹了javascript獲取以及設(shè)置光標(biāo)位置的方法,具有很好的參考價值,下面跟著小編一起來看下吧2017-02-02淺談JS for循環(huán)中使用break和continue的區(qū)別
這篇文章主要介紹了淺談for循環(huán)中使用break和continue的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07js如何實(shí)現(xiàn)點(diǎn)擊標(biāo)簽文字,文字在文本框出現(xiàn)
這篇文章主要介紹了js如何實(shí)現(xiàn)點(diǎn)擊標(biāo)簽文字,文字在文本框出現(xiàn),感興趣的小伙伴們可以參考下2015-08-08