软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

layerui代码控制tab选项卡,添加,关闭的实例

今天小编就为大家分享一篇layerui代码控制tab选项卡,添加,关闭的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

废话不多说,直接上代码吧!

!DOCTYPE htmlhtmlhead meta charset="utf-8" titlelayui/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 !-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 --/headbody div class="layui-layout layui-layout-admin"  div class="layui-header"   div class="layui-logo"layui 后台布局/div   !-- 头部区域(可配合layui已有的水平导航) --   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" 其它系统/a     dl class="layui-nav-child"      dda href=""邮件管理/a/dd      dda href=""消息管理/a/dd      dda href=""授权管理/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"      dda href=""基本资料/a/dd      dda href=""安全设置/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"    !-- 左侧导航区域(可配合layui已有的垂直导航) --    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"       dda 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       dda 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       dda 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       dda 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"       dda 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       dda 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       dda href=""超链接/a/dd      /dl     /li     li class="layui-nav-item"a href=""云市场/a/li     li class="layui-nav-item"a href=""发布商品/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"网站设置 /li      li lay-id="22"用户管理 i class="layui-icon layui-unselect layui-tab-close"/i/li      li lay-id="33"权限分配/li      li lay-id="44"商品管理/li      li lay-id="55"订单管理/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="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    /div   /div  /div /div !-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -- script  layui.use('element', function () {   var $ = layui.jquery   , element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块   //触发事件   var active = {    tabAdd: function () {     //新增一个Tab项     element.tabAdd('demo', {      title: '新选项i class="layui-icon layui-unselect layui-tab-close"/i' //用于演示      , content: '内容' + (Math.random() * 1000 | 0)      , id: new Date().getTime() //实际使用一般是规定好的id,这里以时间戳模拟下     });     //增加点击关闭事件      var r = $(".layui-tab-title").find("li");     //每次新打开tab都是最后一个,所以只对最后一个tab添加点击关闭事件      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项     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

以上这篇layerui代码控制tab选项卡,添加,关闭的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。