layerui代码控制tab选项卡，添加，关闭

最新推荐文章于 2024-06-04 17:34:22 发布
最新推荐文章于 2024-06-04 17:34:22 发布
阅读量3.4w 收藏 14
点赞数 6
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huyanliang/article/details/77966610
版权
<!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="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:;">其它系统</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:;">
                        <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:;">所有商品</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">列表一</a></dd>
                            <dd><a href="javascript:;">列表二</a></dd>
                            <dd><a href="javascript:;">列表三</a></dd>
                            <dd><a href="">超链接</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">解决方案</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">列表一</a></dd>
                            <dd><a href="javascript:;">列表二</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">&#x1006;</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">&#x1006;</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>
奔跑的熊猫
关注
  • 6
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
每天学一点layui之Tab选项卡
php学习之路
11-29 6811
layui官网对tab选项卡的介绍比较简单 3个重要的样式缺一不可：layui-tab layui-tab-title layui-tab-content &amp;lt;div class=&quot;layui-tab&quot;&amp;gt; &amp;lt;ul class=&quot;layui-tab-title&quot;&amp;gt; &amp;lt;li class=&quot;layui-
layerui代码控制tab选项卡,添加,关闭的实例
10-16
今天小编就为大家分享一篇layerui代码控制tab选项卡,添加,关闭的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Layui：一款强大的前端UI框架
最新发布
m0_46413639的博客
06-04 525
在这些框架中，Layui凭借其优雅的设计、灵活的组件和丰富的功能，受到了广大开发者的喜爱。通过引入Layui的CSS和JavaScript文件，开发者可以方便地使用Layui提供的丰富组件，如按钮、表格、表单。灵活定制：Layui的组件具有很强的可定制性，开发者可以根据自己的需求修改组件的样式、颜色、大小等属性，使得组件能够更好地适应不同的网页应用场景。组件丰富：Layui提供了丰富的Web界面组件，如表格、表单、按钮、选项卡、弹出层等，可以满足大部分网页应用的开发需求。二、Layui的使用。
layui tab关闭前实现监听
qq_42249552的博客
05-25 1855
layui-v2.5.7 需求 layui tab 删除的时候判断是否可以执行删除 解决思路 添加新tab 的时候： 解绑layui 自动生成的 tab 删除事件 绑定自定义的 这个tab的删除事件 自定义事件内完成监听，满足条件则调用删除tab 代码如下 /* * 添加 tab */ function tabAdd() { var tabId = new Date().getTime() layui.element.tabAdd('formTab', { ...
layui数据表格点击iframe子页面内打开父级页面的新的tab页签【打开新的父级页签：window.parent.layui.element.tabAdd】【亲测有效！】
Khun_HWJ的博客
10-12 1715
跳转页面传参数查询 在地址栏中写参数
layui自定义新增tab页方法
yhyh1233的博客
03-11 1870
自定义一个js组件 layui.define(['jquery'], function (exports) { var $ = layui.jquery; var element = parent.layui.element; var obj = { openTab: function (id,url,title) { var h = $(window).height(); element.tabAdd('tab',
layUI 学习记录
银滴子的博客
10-08 728
1 点击导航栏跳转页面   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&
JS实现的不规则TAB选项卡效果代码
11-22
在JavaScript实现的不规则选项卡效果中，我们通常...在实际项目中，开发者可以根据需求调整这些代码，比如改变菱形的大小、颜色，或者添加更多的选项卡。这种灵活性使得这种不规则选项卡设计可以适应各种创意界面设计。
适合移动网站的Tab选项卡切换代码
06-24
在构建移动网站时，优化用户体验至关重要，而Tab选项卡切换功能正是提高用户交互性和界面整洁度的有效手段。本文将深入探讨如何使用原生JavaScript实现移动网站的Tab选项卡切换效果，以及这一技术的重要性和实现原理...
jquery弹性效果切换Tab选项卡代码
01-23
本示例中的“jquery弹性效果切换Tab选项卡代码”是关于如何使用jQuery实现一种具有弹性动画效果的Tab选项卡功能。这种功能在网页布局中非常常见，用于展示分段的内容，用户可以通过点击不同的Tab标签来切换显示不同...
LayUI动态加载左侧菜单以及tab组件的使用
m0_73329959的博客
07-13 1888
上一篇讲到了layui的基本入门使用，今天拓展一下layui的其他组件吧目录源码jsp页面js代码dao层Servlet层今日问答疑问1今日金句（符合气质，绝对够金）
Layui选项卡切换及右键操作(新增、多种关闭)完整源码.zip
09-30
实现选项卡新增以及切换、选项卡刷新、选项卡删除（删除其他、删除右侧所有、删除所有）。如有需要可留下邮箱，我给你私发。 参考博文：https://blog.csdn.net/hon_vin/article/details/101676162
layui——Tab项的添加与关闭
热门推荐
Sun_of_Rainy的博客
01-31 1万+
同事写的，我来拜读一下，顺便记录一下，哈哈 layui添加Tab项之前的，首先要引入element 这里现在实现的功能是：在主页面打开新的页面时添加Tab项，点击Tab项后面的x号时，选项卡删除，并刷新主页面，意味着新打开的页面也会被关闭。 用layui官网的例子改写的，有很多问题，以后继续改进 layui.use(['layer','element','laytpl'], func...
layui停止更新_layui实现关闭一个选项卡之后刷新另一个选项卡的数据
weixin_33594621的博客
01-27 597
场景：某供应商模块，有新增、编辑操作，对数据进行更改后，关闭新增或编辑页面，原页面数据刷新思路：1、如果能在供应商页面监听到新增或编辑页面的tab页关闭,那么在供应商页面通过事件监听后执行:window.location.reload()即可。百度许久无果，故放弃。2、在新增或编辑操作完成时，重新发送供货商的页面请求,起初总是用内置的refresh()、reload()、refreshTabs()...
使用了layer，在关闭时，刷新页签的实现方法（我此处在layer中用了layer，然后再实现刷新最开始的页面）
weixin_44050355的博客
01-07 296
不多说，直接看代码 在最后加上end就可以实现，关闭时刷新上层页面。 解决问题时，找了好多，都不满足我的需求。最后试出来了。。
LayUI一行代码解决同一菜单或菜单选项卡重复点击不刷新问题
AnNong
11-09 1871
一、layui菜单及选项卡只有第一次点击会刷新，重复点击是从cache中读取，实际生产环境中这种方式显得很累赘。 在layui的底层js,也就是admin.js中找到监听tab切换的tabChange方法,添加如下配置即可完美解决: P.tabsBody(e).children("iframe").attr("src", P.tabsBody(e).children("iframe").at...
layui iframe中关闭编辑选项卡并刷新列表选项卡的方法
apoc3的博客
03-08 850
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 /* 关闭tab页，刷新表格页面*/ function successTabCallback() { //
layui总结
wuzhan的专栏
09-18 429
layui 知识点总结 1. element相关 element.tabAdd(filter, options); 用于新增一个Tab选项 参数filter：tab元素的 lay-filter="value" 过滤器的值（value） 参数options：设定可选值的对象，目前支持的选项如下述示例： element.tabAdd('demo', { title: '选项卡的标题' ,c...
Layer弹出框提交表单后关闭当前窗口并刷新父窗体数据
老骆驼的博客
06-04 1408
Layui数据表格reload问题 列表页面根据状态搜索出来指定状态的订单，需要后台管理员审核 点击审核以后，弹出处理页面 处理以后想要关闭当前处理页面，并且刷新父窗体。关闭当前窗口没有问题，但是直接使用reload方法，父窗体在页面上会保留搜索条件，但是真正搜索的数据确没有把数据带过去，搜索过相关文档，也说明了reload的时候设置一个参数就可以保持深克隆，但是着实没有效果，不知道是不是哪里有问题，既然没有效果，只有自己在重载方法里面直接把where条件传过去，父窗口存放的where条件，存放在loc
html tab 选项卡切换代码,JS实现简单tab选项卡切换
05-13
HTML代码： ``` <div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button> <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button> <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button> </div> <div id="tab1" class="tabcontent"> <h3>Tab 1 Content</h3> <p>This is the content of Tab 1.</p> </div> <div id="tab2" class="tabcontent"> <h3>Tab 2 Content</h3> <p>This is the content of Tab 2.</p> </div> <div id="tab3" class="tabcontent"> <h3>Tab 3 Content</h3> <p>This is the content of Tab 3.</p> </div> ``` CSS代码： ``` /* 隐藏所有选项卡内容 */ .tabcontent { display: none; } /* 样式化选项卡按钮 */ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } /* 样式化选项卡内容 */ .tabcontent { padding: 6px 12px; border: 1px solid #ccc; border-top: none; } ``` JavaScript代码： ``` function openTab(evt, tabName) { // 隐藏所有选项卡内容 var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // 取消所有选项卡按钮的激活状态 tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // 显示当前选项卡内容并激活按钮 document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; } ``` 以上代码实现了一个简单的选项卡切换效果。点击每个按钮时，会显示对应的选项卡内容，并且激活该按钮。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奔跑的熊猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值