LayUI系列（三）之动态添加选项卡

已于 2023-09-14 19:54:42 修改
阅读量1.9k 收藏 1
点赞数 5
文章标签： layui okhttp 前端 javascript
于 2023-07-13 11:41:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lijie1025/article/details/131685768
版权

文章目录

前言

上一篇博客介绍了树形菜单的实现，这一篇将继续完善通过点击左侧树形菜单实现动态打开选项卡Tab

一. 什么是Tab选项卡

Tab广泛应用于Web页面，因此我们也对其进行了良好的支持（简约风格、卡片风格、响应式Tab以及带删除的Tab等等）。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。

二. 动态选项卡

添加动态选项卡的思路：

  1. 通过网站查找layui选项卡的页面布局代码
  2. 动态添加选项卡
  3. 将选项卡的名称换成选中的菜单名称
  4. 已打开的选项卡不再重复打开
  5. 选择已被打开的选项卡则进行选项卡的转换

示例代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <!-- Top导航栏 -->
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="">menu 11</a></dd>
          <dd><a href="">menu 22</a></dd>
          <dd><a href="">menu 33</a></dd>
        </dl>
      </li>
    </ul>
    <!-- 个人头像及账号操作 -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">Your Profile</a></dd>
          <dd><a href="">Settings</a></dd>
          <dd><a href="login.jsp">Sign out</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
       <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">menu group 1</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">menu 1</a></dd>
            <dd><a href="javascript:;">menu 2</a></dd>
            <dd><a href="javascript:;">menu 3</a></dd>
            <dd><a href="">the links</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">menu group 2</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">list 1</a></dd>
            <dd><a href="javascript:;">list 2</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
        <li class="layui-nav-item"><a href="">the links</a></li> 
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
  
 
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="11">网站设置</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
  </div>
</div>

  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
            底部固定区域
  </div>
</div>
<script>
//JS 

var element,layer,util,$;

layui.use(['element', 'layer', 'util'], function(){
   element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
  
  $.ajax({
	  url:'${pageContext.request.contextPath }/permission.action?methodName=menus',
			  dataType:'json',
			  success:function(data){
				  console.log(data)
				  var htmlStr = '';
				  $.each(data,function(i,n){
					  htmlStr +='<li class="layui-nav-item layui-nav-itemed">';
					  htmlStr +='<a class="" href="javascript:;">'+n.text+'</a>';
					  if(n.hasChildren){
						  var children=n.children;
						  htmlStr +='<dl class="layui-nav-child">';
						  
						  $.each(children,function(index,node){
							  htmlStr +='<dd><a href="javascript:;" onclick="openTab(\''+node.text+'\',\''+node.attributes.self.url+'\',\''+node.id+'\')">'+node.text+'</a></dd>';
						  })
						  htmlStr +='</dl>';
					  }
					  htmlStr +='</li>';
				  })
				  
				  $("#menu").html(htmlStr);
				  
				  element.render('menu');
			  } 
  });
});

function openTab(title,content,id){
	var $node = $('li[lay-id="'+id+'"]');
	console.log($node)
	if($node.length == 0){
		//新增一个Tab项
	    element.tabAdd('demo', {
	      title: title //用于演示
	      ,content: content
	      ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
	    })
	}
	 element.tabChange('demo', id); //切换到：用户管理
	
}
</script>
</body>
</html>

dao层

package com.zking.dao;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.zking.entity.Permission;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.TreeVo;

public class PermissionDao extends BaseDao<Permission> {
	

	public List<Permission> list(Permission permission, PageBean pageBean) throws Exception {
		String sql = "select *from t_easyui_permission";
		return super.executeQuery(sql, Permission.class, pageBean);
	}

	
//	将数据库查询出的平级数据，转换成父子关系的数据
	public List<TreeVo<Permission>> menus(Permission permission, PageBean pageBean) throws Exception{
		List<TreeVo<Permission>> lst = new ArrayList<TreeVo<Permission>>();
		List<Permission> list = this.list(permission, pageBean);
		for (Permission p : list) {
			TreeVo<Permission> vo = new TreeVo<>();
			vo.setId(p.getId()+"");
			vo.setText(p.getName());
			vo.setParentId(p.getPid()+"");
			Map<String, Object> map = new HashMap<String, Object>();
			map.put("self", p);
			vo.setAttributes(map);
			lst.add(vo);
		}
		return BuildTree.buildList(lst, "0");
	}
}

1. 通过网站查找layui选项卡的页面布局代码

参考地址：http://layui.org.cn/demo/index.html
在这里插入图片描述
预览效果：
在这里插入图片描述

2. 动态添加选项卡

点击菜单时要动态生成tab选项卡。
需要给菜单添加点击事件，点击菜单时调用增加选项卡的方法。

 tabAdd: function(){
      //新增一个Tab项
      element.tabAdd('demo', {
        title: '新选项'+ (Math.random()*1000|0) //用于演示
        ,content: '内容'+ (Math.random()*1000|0)
        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
      })
    }

在这里插入图片描述

3. 将选项卡的名称换成选中的菜单名称

在将选项卡名称换为对应的菜单名称的同时，将选项卡的内容等也进行更改。

function openTab(title,content,id){
	var $node = $('li[lay-id="'+id+'"]');
	console.log($node)
	if($node.length == 0){
		//新增一个Tab项
	    element.tabAdd('demo', {
	      title: title //用于演示
	      ,content: content
	      ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
	    })
	}
	 element.tabChange('demo', id); //切换到：用户管理
	
}

4. 已打开的选项卡不再重复打开

function openTab(title,content,id){
	var $node = $('li[lay-id="'+id+'"]');
	console.log($node)
	if($node.length == 0){
		//新增一个Tab项
	    element.tabAdd('demo', {
	      title: title //用于演示
	      ,content: content
	      ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
	    })
	}
	 element.tabChange('demo', id); //切换到：用户管理
	
}

5. 选择已被打开的选项卡则进行选项卡的转换

element.tabChange('demo', id); //切换到：用户管理

三. 将JavaScript代码封装成js文件

好处

1. 代码复用性：将JavaScript代码封装在单独的JS文件中，可以在多个JSP页面中重复使用，提高了代码的复用性。这样可以简化对公共功能的修改和维护。

2. 可维护性：将JavaScript代码单独封装成JS文件后，可以专注于JavaScript代码的编写和维护，方便团队协作。同时，可以更方便地进行版本控制和管理。

3. 页面加载速度：将JavaScript代码封装成外部的JS文件后，可以缓存该文件，减小页面体积，加快页面加载速度。同时，当多个JSP页面引用同一个JS文件时，浏览器可以缓存该文件，减少服务器请求和响应的次数，提高网页性能。

4. 可读性和可维护性：将JavaScript代码从JSP页面中分离出来，可以提高代码的可读性和可维护性。在JS文件中，可以使用更好的代码编辑器和调试工具，提供更好的代码提示和错误检查，以及更方便的调试功能。

总之，将JSP界面中的JavaScript代码封装成JS文件可以提高代码的复用性、可维护性和可读性，同时也可以提高页面加载速度，优化用户体验。

封装后的js文件【main.js】

var element,layer,util,$;

layui.use(['element', 'layer', 'util'], function(){
   element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
  
  $.ajax({
	  url:'permission.action?methodName=menus',
			  dataType:'json',
			  success:function(data){
				  console.log(data)
				  var htmlStr = '';
				  $.each(data,function(i,n){
					  htmlStr +='<li class="layui-nav-item layui-nav-itemed">';
					  htmlStr +='<a class="" href="javascript:;">'+n.text+'</a>';
					  if(n.hasChildren){
						  var children=n.children;
						  htmlStr +='<dl class="layui-nav-child">';
						  
						  $.each(children,function(index,node){
							  htmlStr +='<dd><a href="javascript:;" onclick="openTab(\''+node.text+'\',\''+node.attributes.self.url+'\',\''+node.id+'\')">'+node.text+'</a></dd>';
						  })
						  htmlStr +='</dl>';
					  }
					  htmlStr +='</li>';
				  })
				  
				  $("#menu").html(htmlStr);
				  
				  element.render('menu');
			  } 
  });
});

function openTab(title,content,id){
	var $node = $('li[lay-id="'+id+'"]');
	console.log($node)
	if($node.length == 0){
		//新增一个Tab项
	    element.tabAdd('demo', {
	      title: title //用于演示
	      ,content: content
	      ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
	    })
	}
	 element.tabChange('demo', id); //切换到：用户管理
	
}

在公共文件header.jsp中添加base标签

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css">
 
<!-- 引入 layui.js -->
<script src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>
<base href="${pageContext.request.contextPath }/"/>

jsp界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="static/js/main.js"></script> 
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <!-- Top导航栏 -->
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="">menu 11</a></dd>
          <dd><a href="">menu 22</a></dd>
          <dd><a href="">menu 33</a></dd>
        </dl>
      </li>
    </ul>
    <!-- 个人头像及账号操作 -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">Your Profile</a></dd>
          <dd><a href="">Settings</a></dd>
          <dd><a href="login.jsp">Sign out</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
       <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">menu group 1</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">menu 1</a></dd>
            <dd><a href="javascript:;">menu 2</a></dd>
            <dd><a href="javascript:;">menu 3</a></dd>
            <dd><a href="">the links</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">menu group 2</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">list 1</a></dd>
            <dd><a href="javascript:;">list 2</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
        <li class="layui-nav-item"><a href="">the links</a></li> 
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
  
 
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="11">网站设置</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
  </div>
</div>

  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
            底部固定区域
  </div>
</div>
<script>
//JS 


</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

不念那年晚春
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
LayUI-----动态选项卡
qq_62331938的博客
07-20 3971
上次我们分享了LayUI的动态树，既侧边菜单。做了这个功能总要有用吧，这次分享的内容就是基于上篇分享的内容进行完善。在点击侧边菜单时，新增选项卡、点击已有选项卡的菜单项更改选中。.........
前端框架Layui实现动态选项卡&iframe使用（附源码）
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
07-13 4647
iframe（内嵌框架）是HTML中的一个标签，用于在网页中嵌入另一个页面或文档。通过使用iframe标签，可以在网页中创建一个独立的内联框架，用于显示来自不同源或同一源的外部内容。这个嵌入的页面可以是其他网页、视频、地图、广告等等。src：指定要加载的内容的URL。width：指定`iframe`的宽度。-height：指定`iframe`的高度。frameborder：指定是否显示边框。scrolling：指定是否显示滚动条。
LayUI动态加载左侧菜单以及tab组件的使用
07-13
layui，登陆，左侧菜单实现
LayUI动态选项卡的使用
weixin_74268571的博客
07-12 3476
选项卡（Tab）是指Web浏览器中显示多个网页或文档的标签式界面。每个选项卡相当于一个独立的窗口。选项卡的详细使用步骤。
Layui实现动态选项卡(超详细)
最新发布
m0_73192864的博客
07-13 1664
通常情况下，每个选项卡代表着不同的功能或者内容，当用户切换选项卡时，界面会相应地更新展示对应的内容。动态选项卡的优势在于它可以提供更多内容和功能的展示空间，同时方便用户快速切换不同的信息或功能，提高用户体验。1，在官网copy所需要的选项卡复制到项目中，再给遍历的二级菜单设置一个函数，以便点击二级菜单的时候生成相对应的选项卡。前言：实现该动态选项卡，需要实现树形菜单，该版本是基于实现树形菜单之上的如果不理解，可以参考我所编写树形菜单。第三点会详细讲解o！，所点击二级菜单生成相对应的选项卡。
Layui实现动态加载侧边导航栏菜单功能
qq_42739154的博客
02-10 3018
layui的树形导航栏动态加载，该代码只实现了二级菜单，多级菜单可以参考思路。
【Layui】选项卡Tab：完美实现网页内容分类与导航
无法自律的人的博客
07-12 5961
Layui选项卡是一种基于Layui框架的前端组件，用于创建多个选项卡并在其之间进行切换。Layui是一个轻量级、易用、灵活的前端UI框架，旨在简化前端开发过程。使用Layui选项卡，你可以在页面中创建多个选项卡标签，每个标签对应一个内容区域。用户可以点击选项卡标签来切换显示相应的内容区域。这种方式常用于页面的分组显示或切换不同的功能模块。Layui选项卡提供了丰富的配置选项，包括标签样式、选项卡切换的触发事件、内容区域的布局方式等。它还支持动态添加和删除选项卡，以及自定义选项卡的样式和功能。
Layui之选项卡案例 详细易懂
YZZdear的博客
07-12 1942
利用Layui框架实现动态选项卡
LayUi之选项卡的详解（附源码讲解）
m0_74315688的博客
07-12 1657
怎么用LayUi完成选项卡的效果？怎么做出对应的案例？一篇全部解决，手把手教学！！
layUI 学习记录
银滴子的博客
10-08 731
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"&
layui添加动态菜单与选项卡
12-09
本文实例为大家分享了layui添加动态菜单与选项卡的具体代码，供大家参考，具体内容如下 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Layui</title> <link rel="stylesheet" href="js/css/layui.css" media="all"> </head> <body> <div cl
LayUI之动态选项卡Tab&iframe使用
lz17267861157的博客
07-12 3083
LayUI选项卡是指在LayUI框架中提供的一种UI组件，用于实现选项卡式的内容切换和导航功能。选项卡通常用于在一个页面中展示多个相互独立但相关的内容，并通过选项卡进行快速切换。
layui点击事件新增选项卡
xucan100的博客
03-09 1152
layui.use(['form','element','layer','jquery'],function(){ var form = layui.form, layer = parent.layer === undefined ? layui.layer : top.layer, element = layui.element; curTab...
Layui-选项卡
weixin_54668937的博客
03-08 3788
Layui-选项卡 文献种类：专题技术文献； 开发工具与关键技术： VS、JS 作者：方建恒 ；年级：20级 ；撰写时间： 2022 年 3 月 8日 在一些网页的制作中，往往会用到选项卡切换的功能， 今天我们就来了解一下如何运用Layui的选项卡组件。 首先我们要把layui的js和css引入，如图： 接下来是HTML部分： 我们用ul标签把选项卡的头部包裹起来， 再用div标签把选项卡的内容包裹起来，如图： 接下来是script部分： 因为tab组件依赖于element组件，所
Layui之动态选项卡
qq_66924116的博客
07-18 408
/ResponseUtil.writeJson(resp,newR().data("code",200).data("msg","成功"));//ResponseUtil.writeJson(resp,newR().data("code",0).data("msg","失败"));if("张三".equals(user.getLoginName())&&"123456".equals(user.getPwd())){
LayUI之动态选项卡
weixin_66202611的博客
07-18 1126
网站设置用户管理权限分配商品管理订单管理（2）网站设置用户管理
layui-选项卡
OpenSource_的博客
08-08 1342
layui-选项卡 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title&...
js实现点击按钮动态添加与删除layui的Tab选项卡
06-06
好的，我可以帮你实现这个功能。 首先，你需要在页面中引入layui库和jquery库： ```html <!-- 引入layui库 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.css"> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.js"></script> <!-- 引入jquery库 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ``` 然后，你需要在页面中添加一个按钮和一个容器，用于存放选项卡： ```html <button id="add-tab">新增选项卡</button> <div class="layui-tab" lay-filter="tab-demo"> <ul class="layui-tab-title"> <li class="layui-this">选项卡1</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容1</div> </div> </div> ``` 接下来，你需要编写js代码来实现点击按钮动态添加与删除选项卡的功能： ```javascript // 初始化选项卡 layui.use('element', function(){ var element = layui.element; }); // 点击按钮新增选项卡 $('#add-tab').click(function() { var title = '选项卡' + ($('.layui-tab-title li').length + 1); // 新增选项卡的标题 var content = '内容' + ($('.layui-tab-content .layui-tab-item').length + 1); // 新增选项卡的内容 var tabTpl = '<li lay-id="{id}" class=""><a href="javascript:;">{title}</a></li>'; // 选项卡模板 var contentTpl = '<div class="layui-tab-item">{content}</div>'; // 选项卡内容模板 var id = new Date().getTime(); // 选项卡的唯一标识 var tabHtml = tabTpl.replace(/{id}/g, id).replace(/{title}/g, title); // 替换选项卡模板中的占位符 var contentHtml = contentTpl.replace(/{content}/g, content); // 替换选项卡内容模板中的占位符 $('.layui-tab-title').append(tabHtml); // 添加选项卡 $('.layui-tab-content').append(contentHtml); // 添加选项卡内容 layui.use('element', function(){ var element = layui.element; element.tabAdd('tab-demo', { title: title, content: content, id: id }); }); }); // 点击选项卡上的关闭按钮删除选项卡 $('body').on('click', '.layui-tab-title li i', function() { var id = $(this).parent().attr('lay-id'); // 获取选项卡的唯一标识 layui.use('element', function(){ var element = layui.element; element.tabDelete('tab-demo', id); // 删除选项卡 }); }); ``` 以上代码中，我们使用了`layui.element`模块来实现选项卡的添加和删除。在新增选项卡时，我们使用了模板字符串和正则表达式来替换占位符，生成选项卡和选项卡内容的html代码。在删除选项卡时，我们使用了事件委托的方式来绑定事件，以便于处理动态生成的选项卡。 好了，以上就是实现点击按钮动态添加与删除layui的Tab选项卡的代码了，你可以根据自己的需求进行修改。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

不念那年晚春

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

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

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

打赏作者

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

抵扣说明：

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

余额充值