layui学习使用问题整理 —— Tabs选项卡

最新推荐文章于 2025-06-17 22:54:25 发布

原创最新推荐文章于 2025-06-17 22:54:25 发布 · 2.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#layui #tab #选项卡 #添加标签页

layui 专栏收录该内容

2 篇文章

订阅专栏

博客主要围绕Layui的tab标签页展开，介绍了去掉tab标签页中第一项删除x按钮的方法，还讲解了通过“+”实现tab标签页动态添加，同时给出了相关的jsp和js代码。

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

1. 去掉tab标签页中第一项的删除 x 按钮

 body .layui-tab-title li:nth-child(1) i {
     display: none;
 }

2. tab标签页动态添加

通过+实现动态添加tab标签页。

jsp代码：

js代码：

//触发事件
var active = {
//在这里给active绑定几项事件，后面可通过active调用这些事件
    tabAdd: function(url,id,name) {//新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
	element.tabAdd('tabid', {
		title: name,
	        content: '<iframe id="tabFrame'+id+'" scrolling="no" frameborder="0" src="'+url +'" style="width:100%;height: 154px;"></iframe>',
	        id: id //规定好的id
	});
        element.render('tab');//重新渲染tab
    },
    tabChange: function(id) {
	//切换到指定Tab项
	element.tabChange('runWayTad', id); //根据传入的id传入到指定的tab项
    },
    tabDelete: function (id) {
	 element.tabDelete("runWayTad", id);//删除
    }
};