layerui代码控制tab选项卡,添加,关闭的实例
更新时间：2019年09月04日 09:55:12 作者：奔跑的熊猫
今天小编就为大家分享一篇layerui代码控制tab选项卡,添加,关闭的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
废话不多说，直接上代码吧！
<!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>
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<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">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a 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">
<dd><a href="">基本资料</a></dd>
<dd><a 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">
<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="">发布商品</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选项卡,添加,关闭的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Javascript中使用A标签获取当前目录的绝对路径方法,本文讲解的方法比较特别,需要的朋友可以参考下2015-03-03
最近因为项目需要，有个需求是让实时显示当前时间，然后想想这不简单吗，自己就动手敲代码，但是发现一个问题，通过getMonth()得到月份，总是会比当前月份少1，深深觉得实践出真知啊…之前觉得Date对象挺简单的，有很多细节都没有注意。下面这篇文章就给大家详细介绍下。2016-10-10
这篇文章主要介绍了js实现纯前端的图片预览的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了socket在egg中的使用，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了手机浏览器唤起微信分享功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了TypeScript里string和String的区别，真的不止是大小写的区别，string表示原生类型，而String表示对象，下文更多详细内容需要的小伙伴可以参考一下2022-03-03
这篇文章主要给大家介绍了关于利用js判断数据是否是数组或字符串的常见方法,其实有很多方法可以判断数据是否是数组或字符串,需要的朋友可以参考下2023-07-07
IE的事件传递-event.cancelBubble示例介绍
关于event.cancelBubble,Bubble就是一个事件可以从子节点向父节点传递，下面有个不错的示例，大家可以感受下2014-01-01
这篇文章主要介绍了JS实现简单的星期格式转换功能,涉及JavaScript基于Date()对象的日期时间操作技巧,需要的朋友可以参考下2018-07-07
还是挂马问题，这段时间，我渐渐感到压力，头大，通过QQ或MSN加我的人越来越多，我最近自己的工作本来就忙得不亦乐乎。哎，想想，还是要抽空来来帮帮大家。2008-03-03
最新评论