layui——Tab项的添加与关闭

最新推荐文章于 2025-05-27 09:08:06 发布

Sunlalalla

最新推荐文章于 2025-05-27 09:08:06 发布

阅读量1.5w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： layui Tab项

本文链接：https://blog.youkuaiyun.com/Sun_of_Rainy/article/details/86718746

前端专栏收录该内容

69 篇文章

订阅专栏

本文介绍如何使用layui框架的element模块动态添加和删除Tab项，实现页面内新Tab的打开与关闭功能，同时更新了主页面状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

同事写的，我来拜读一下，顺便记录一下，哈哈

layui添加Tab项之前的，首先要引入element

这里现在实现的功能是：在主页面打开新的页面时添加Tab项，点击Tab项后面的x号时，选项卡删除，并刷新主页面，意味着新打开的页面也会被关闭。

用layui官网的例子改写的，有很多问题，以后继续改进

layui.use(['layer','element','laytpl'], function(){
 
              element.tabAdd('demo', {
                title: '新选项'+ (Math.random()*1000|0) //用于演示
                ,content: '<iframe scrolling="yes" frameborder="0" src="'+path+'" style="width:100%;height:100%"></iframe>'
                ,id: "editTab"+templateId //实际使用一般是规定好的id，这里以时间戳模拟下
              })
             
              var r = $(".layui-tab-title").find("li");//找到主页面的该元素
              element.tabChange('demo', 'editTab'+templateId);
            
                r.eq(r.length - 1).children("i").on("click", function () {   //Tab项的最后一个的i元素添加点击事件
               
                     //alert($(this).parent("li").attr('lay-id'));
                     element.tabDelete("demo", $(this).parent("li").attr('lay-id'));//删除Tab项
                    window.location.reload();
              })
                
            }
            ,tabDelete: function(othis){
              //删除指定Tab项
              element.tabDelete('demo', '44'); //删除：“商品管理”
              
              
              othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
              //切换到指定Tab项
              element.tabChange('demo', 'mainTab'); //切换到：用户管理
            }
          };
});

顺便我也找了下相关的例子，这个挺不错的，写的挺全的，推荐一下

https://www.cnblogs.com/zjc2018/p/10171191.html

layui官方参考：

https://www.layui.com/doc/modules/element.html#ontab

https://www.layui.com/admin/pro/#/component/tabs/

https://www.layui.com/demo/tab.html