Layui的选项卡及菜单-阿里云开发者社区

InsCode是一个集成了在线IDE、在线AI编程、在线算力租赁、在线项目部署以及在线SD 模型使用的综合代码开发平台。不论你是初级软件工程师，还是AI大模型爱好者，InsCode都能帮助你快速编写代码，运行项目。甚至在这里你还可以一键购买算力，训练大模型，开发自己的AI应用程序。

一、介绍

1.1 是什么?

Layui的选项卡是一种常见的页面布局组件，用于切换和展示不同的内容。它使得用户能够在一个页面上轻松切换不同的标签页，并在每个标签页上显示相应的内容。Layui的选项卡组件提供了简单易用的API，使开发者可以方便地实现选项卡布局，同时支持自定义样式和事件处理。

下面是对Layui选项卡的详细介绍：

HTML结构:

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">选项卡1</li>
    <li>选项卡2</li>
    <li>选项卡3</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>
</div>

在这个HTML结构中，.layui-tab-title表示选项卡的标题栏，.layui-tab-content是选项卡的内容区域。每个选项卡标题用li表示，选项卡内容用div表示。其中，.layui-this表示当前选中的选项卡。

2.初始化选项卡

layui.use('element', function(){
  var element = layui.element;
  element.init();
});

通过这段代码，你可以使用Layui的选项卡功能。layui.use('element',...)表示引入Layui的element模块，通过element.init()来初始化选项卡。

3. 选项卡的切换和内容展示

Layui会自动处理选项卡的切换行为。当你点击某个选项卡标题时，对应的内容区域会显示出来，其他选项卡的内容会隐藏。

4. 自定义样式和事件处理

你可以通过自定义CSS样式来修改选项卡的外观，比如修改选项卡的背景颜色、文字颜色等。此外，Layui还提供了一些事件函数，你可以通过绑定这些事件函数来处理选项卡的相关操作，比如用户切换选项卡时触发的事件等。

总而言之，Layui的选项卡组件是一种功能强大，简单易用的页面布局组件，可用于实现选项卡式的页面切换和内容展示。它提供了丰富的样式和事件处理接口，使得开发者能够根据自己的需求灵活定制选项卡的外观和行为。

1.2 作用

Layui的选项卡组件在Web前端开发中具有以下作用：

1**. 切换不同的内容：选项卡组件可以让用户在一个页面上切换不同的标签页，每个标签页对应着不同的内容。这种方式可以提供更好的用户体验，帮助用户快速访问和查看不同的信息或功能模块。

2**. 简洁的页面布局：通过选项卡组件，可以将页面的内容按逻辑分类并分组显示，不同的标签页对应不同的内容。这样可以使页面布局更加简洁明了，减少页面的复杂度，提升用户的使用效率。

3**. 节省页面空间：在有限的页面空间中，通过选项卡组件可以展示更多的内容，而不需要占用过多的页面空间。这对于页面中需要展示大量信息或提供多个功能模块的场景尤为有用。

4**. 提升页面交互性：选项卡组件不仅提供了切换内容的功能，还可以通过绑定事件来实现一些交互操作，比如根据用户操作展示相应的内容或触发某个事件。这样可以使页面与用户之间的交互更加丰富，增强用户的参与感和操作体验。

5**. 灵活的定制样式：Layui的选项卡组件提供了一系列的自定义选项，可以通过修改CSS样式来满足不同项目的视觉需求。开发者可以根据自己的设计要求自定义选项卡的外观，使其与项目整体风格一致。

总而言之，Layui的选项卡组件在Web前端开发中起到了提供内容切换、简洁布局、节省空间、增强交互和样式定制等作用。它是一种功能丰富、易用灵活的组件，可以提升用户体验，优化页面布局，满足不同项目的需求。无论是在企业官网、管理后台系统还是个人博客等场景中，选项卡组件都能发挥重要的作用。

导入LayUI的资源到项目中，在以下网站可以进行下载，或者在本人的博客LayUI的使用中进行下载资源包解压后进行导入你自己的项目

其中官方网站已经下线，可以访问该网站地址进行使用: 在线示例 - Layui

二、选项卡的使用

2.1 有什么功能

Layui的选项卡组件提供了以下常用功能：

1~ . 切换选项卡：通过点击选项卡标题来切换不同的选项卡内容。当点击某个选项卡标题时，对应的内容区域会显示出来，其他选项卡的内容会隐藏。这使得用户可以在页面上快速切换不同的标签页，方便查看不同的内容。

2~ . 默认选中项：选项卡组件支持设置一个选项卡作为初始默认选中项。通过给某个选项卡标题添加 `.layui-this` 的CSS类，即可将该选项卡设定为默认选中状态，使得页面加载时显示指定的选项卡内容。

3~ . 动态添加和删除选项卡：通过调用选项卡组件提供的 API，可以在运行时动态地添加或删除选项卡。这样可以根据实际需求，动态地扩展或修改选项卡的数量和内容。

4~ . 自定义选项卡标题：选项卡组件允许开发者根据需要自定义选项卡的标题内容和样式。可以通过修改选项卡标题节点的HTML代码或者CSS样式，实现自定义的选项卡标题效果，以满足项目的UI设计要求。

5~ . 选项卡事件处理：Layui的选项卡组件提供了一些事件处理函数，可以在用户切换选项卡时触发相应的事件操作。开发者可以通过绑定这些事件函数，实现对选项卡切换动作的监听和处理，例如加载数据、执行业务逻辑等。

6~ . 多种选项卡样式：Layui提供了多种预定义的选项卡样式，包括基本样式、卡片式样式、带图标的样式等。开发者可以根据项目需求选择适合的样式，并进行自定义调整。

总而言之，Layui的选项卡组件通过切换选项卡、默认选中项、动态添加删除、自定义样式和事件处理等功能，提供了灵活、易用的选项卡功能。开发者可以根据自己的需求和设计要求，灵活运用这些功能，构建出符合项目要求的选项卡布局和交互效果。选项卡组件在Web前端开发中常被用于构建多页面切换、数据展示、功能切换等场景。

2.2 怎么用

要使用Layui中的选项卡组件，需要按照以下步骤进行设置和调用：

1. 引入Layui的相关文件：

<link rel="stylesheet" href="path/to/layui/css/layui.css">
<script src="path/to/layui/layui.js"></script>

在HTML文件中引入Layui的样式文件和脚本文件。

2. 创建HTML结构，定义选项卡标签和内容：

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">选项卡1</li>
    <li>选项卡2</li>
    <li>选项卡3</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>
</div>

在HTML文件中创建选项卡的结构，包含一个容器 `.layui-tab`，选项卡标题 `.layui-tab-title` 和选项卡内容 `.layui-tab-content`。每个选项卡标题用 `li` 表示，选项卡内容用 `div` 表示。通过给某个选项卡标题添加 `.layui-this` 的CSS类，可以设置默认选中的选项卡。

3. 初始化选项卡组件：

```javascript

layui.use('element', function(){
  var element = layui.element;
  element.init();
});

在JavaScript中使用 `layui.use('element', ...)` 来引入Layui的element模块，并通过 `element.init()` 初始化选项卡组件。

通过以上步骤，就可以在页面中使用Layui的选项卡组件了。用户可以点击选项卡标题进行切换，对应的内容会显示出来。

此外，你还可以根据需要自定义选项卡的样式和功能，例如添加图标、自定义事件等。具体的自定义操作可以参考Layui的文档和示例代码。

总结：通过引入Layui的样式和脚本文件，创建选项卡的HTML结构，调用初始化函数，就可以使用Layui的选项卡组件了。这样可以实现页面上的选项卡切换和内容展示功能。

2.3 有什么效果

Layui的选项卡组件提供了一种简洁美观的页面布局，具体展现的效果如下：

^1^. 选项卡标题栏：选项卡标题栏以水平方向排列，并显示不同的选项卡标题。默认情况下，选中的选项卡标题会有一个高亮效果。

^2^. 选项卡内容区域：选项卡的内容区域显示了不同选项卡对应的内容。每个选项卡的内容可以是文本、图片、表单等，具体内容可以根据实际需求自定义。

^3^. 切换选项卡：当用户点击不同的选项卡标题时，选项卡内容会相应地切换显示。即点击某个选项卡标题，对应的内容区域会显示出来，其他选项卡的内容则隐藏。

^4^. 滑动切换效果：Layui的选项卡组件中，默认提供了滑动切换的效果。当选项卡标题栏的宽度超过容器宽度时，可以通过左右滑动来切换选项卡。

^5^. 自定义样式和事件：Layui的选项卡组件支持自定义样式和事件处理。开发者可以根据项目的需求，修改选项卡的外观样式，比如调整选项卡标题的颜色、背景等。同时，还可以绑定自定义事件，实现一些特定的交互效果。

总而言之，Layui的选项卡组件在页面中呈现出清晰、简洁的布局效果。用户可以通过点击选项卡标题来切换不同的内容，使得页面上的信息展示和功能切换更加方便和直观。选项卡组件提供了丰富的样式和事件处理接口，使得开发者可以自由定制选项卡的外观和行为，满足不同项目的需求，并提升用户的交互体验。

三、选项卡和菜单联动

要将Layui的模板应用到自己的项目中，可以按照以下思路和流程进行：

1.--下载和引入Layui：首先，在Layui的官网（https://www.layui.com/）上下载最新版本的Layui。然后，将Layui的样式文件（layui.css）和JavaScript文件（layui.js）引入到自己的项目中。

2.--创建基础页面结构：根据自己的项目需求，创建基础的HTML页面结构。可以参考Layui的模板示例或根据自己的设计要求自定义页面结构。确保页面中包含一个合适的容器，用于显示模板的内容。

3.--配置Layui模块：在需要使用Layui模板的页面中，引入Layui的模块。使用Layui的layui.config()方法配置模板所需的模块路径，以确保Layui的模块可以正常加载。

4.--加载并渲染模板：通过Layui的laytpl模块，加载并渲染模板文件。可以通过AJAX请求获取模板文件，或直接将模板内容写在JavaScript中。使用laytpl的render()方法将数据源和模板进行渲染，并将渲染结果插入到页面中指定的容器中。

5.--数据绑定和动态更新：如果模板需要根据数据源动态更新内容，可以使用Layui的laytpl模块提供的数据绑定功能。通过在模板中使用{{ }}占位符来指定绑定的数据字段，然后在渲染时将实际数据传入，从而实现动态更新的效果。

6.--自定义样式和交互：根据自己的设计要求，可以对Layui的模板进行样式和交互的定制。通过修改模板的CSS样式或绑定自定义事件来实现特定的视觉效果和交互行为。

7.--测试和调试：在完成模板的应用后，通过测试和调试来确保模板在自己的项目中正常工作，并满足项目的需求和预期效果。

以上是将Layui的模板应用到自己项目中的基本思路和流程。具体的操作和细节可能会因项目的不同而有所差异。可以结合Layui的文档和示例代码，根据自己的项目需求进行相应的调整和扩展。

以下的实例效果是本人博客中Layui动态树实现的效果显示如图:

提示 : 以下操作基于本人博客中(LayUI动态树)的所有代码进行

3.1 使用选项卡思路

可以访问该网站地址进行使用: 在线示例 - Layui

使用Layui的思路流程

1.参考官网是否有该功能的控件，该控件模块是否可以在支持相对应的功能效果--为静态

2. 将官网的静态模块转换为相当应的动态功能

3. 功能效果实现后进行修改/优化，使该功能融入到自己的项目中实现自己所需下效果

3.2 OrdersDao优化

以下是OrdersDao订单方法类(Dao层数据访问)的优化后的整合代码

package com.CloudJun.dao;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.CloudJun.entity.Orders;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.TreeVo;
/**
 * @author Cloud.Jun
 * @com.CloudJun.dao
 * @OrdersDao(说明):订单菜单的方法类(Dao层)
 */
public class OrdersDao extends BaseDao<Orders>{
  /**
   * @param order
   * @param pageBean
   * @return 获取t_easyui_permission数据表中所有数据
   * @throws Exception
   */
  public List<Orders> list(Orders order, PageBean pageBean) throws Exception {
    String sql="select * from t_easyui_permission";
    return super.executeQuery(sql, Orders.class, pageBean);
  }
  /**
   * @param order
   * @param pageBean
   * @return 将查询后的平级数据转换为父子关系的数据
   * @throws Exception
   */
  public List<TreeVo<Orders>> menus(Orders order, PageBean pageBean)throws Exception {
    //创建一个容器保存数据转换后的父子关系的数据
    List<TreeVo<Orders>> trpe = new ArrayList<TreeVo<Orders>>();
    //获取所有平级数据
    List<Orders> list = this.list(order, pageBean);
    //循环
    for (Orders p : list) {
      TreeVo<Orders> tp = new TreeVo<Orders>();
      //long强转String类型
      tp.setId(p.getId()+"");
      tp.setText(p.getName());
      tp.setParentId(p.getPid()+"");
      //将TreeVo中的Attributes属性增加相对应实体对象，用于前端的菜单点击后创建对应的选项卡内容为相对的url
      Map<String, Object> maps = new HashMap<String, Object>();
      maps.put("tvp", p);
      tp.setAttributes(maps);
      trpe.add(tp);
    }
    //返回调用工具类的方法将容器里的数据转成有父子关系的数据
    return BuildTree.buildList(trpe,"0");
  }
  //数据测试
  public static void main(String[] args) throws Exception {
    List<TreeVo<Orders>> list = new OrdersDao().menus(null, null);
    ObjectMapper om = new ObjectMapper();
    System.out.println(om.writeValueAsString(list));
  }
}

3.3 JSP页面的优化

index.jsp页面中动态树(左侧的菜单)和选项卡的联动

进行修改/优化index.jsp后的代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
  <%@include file="common/header.jsp" %>
  <!-- <script type="text/javascript" src="js/index.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">
      </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>
let element,layer,util,$;
layui.use(['element', 'layer', 'util'], function(){
   element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
  $.ajax({
    url:"${pageContext.request.contextPath }/orders.action?methodName=menus",
    dataType:'json',
      success:function(data){
      /* console.log(data); */
      /* 定义标签要拼接的文本内容  */
      let datacontent = '';
      $.each(data,function(i,n){
        datacontent += ' <li class="layui-nav-item layui-nav-itemed">';
        datacontent +='<a class="" href="javascript:;">'+n.text+'</a>';
        /* console.log(n); */
        /* 判断是否有子节点有就进行子菜单增加，没有就不加 */
        if(n.hasChildren){
          datacontent +='<dl class="layui-nav-child">';
          /* 循环所有的子节点  n.children*/
          $.each(n.children,function(index,node){
             datacontent += '<dd><a href="javascript:;" onclick="AddTab(\''+node.text+'\',\''+node.attributes.tvp.url+'\',\''+node.id+'\')" >'+node.text+'</a></dd>'; 
          })
          datacontent += ' </dl> ';
        }
        datacontent += ' </li> ';
      })
      /* 重置里面的文本内容 */
      $("#menu").html(datacontent);
      element.render('menu');
    }
     });
  });
 /* 使用Layui的思路流程
  * 1.参考官网是否有该功能的控件，该控件模块是否可以在支持相对应的功能效果--为静态
  * 2.将官网的静态模块转换为相当应的动态功能(将静态选项卡转换为相对应左边菜单的功能动态选项卡)
  * 3.功能效果实现后进行修改/优化，使该功能融入到自己的项目中实现自己所需下效果
  *  3.1 将选项卡的名称对应左侧菜单
  *  3.2 重复选中的选项卡不会多次打开
  *  3.3  如果重复选中，就只显示选中的选项卡页面bg/listOrder1.jsp
  */
  function AddTab(title,content,id) {
   let $node = $('li[lay-id="'+id+'"]');
   if($node.length==0){
    //新增一个Tab项
          element.tabAdd('demo', {
            title: title //用于演示
            ,content: "<iframe frameborder='0' src='"+content+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
            ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
          })
   }
   element.tabChange('demo', id); //切换到：用户管理
}
</script>
</body>
</html>

3.4 项目整理

整合目的:将html的代码和js的代码进行分离

3.4.1 整合作用

在项目中合理分离HTML代码、JavaScript代码和CSS代码具有以下几个作用：

-1-. 提高可维护性：将HTML代码、JavaScript代码和CSS代码分离，可以使代码结构清晰，并使不同类型的代码各自专注于自己的功能。这样可以降低修改或维护代码时的复杂度，提高代码的可维护性和可读性。

-2-. 提高开发效率：通过分离HTML、JavaScript和CSS代码，开发人员可以专注于各自的领域，提高开发效率。HTML负责页面结构和内容，JavaScript负责交互逻辑，CSS负责样式定义，每个人可以在自己擅长的领域内进行开发，不会相互干扰，提高开发效率。

-3-. 便于团队开发和协作：在大型团队中，多个开发人员可能同时开发和维护一个项目。通过合理分离HTML、JavaScript和CSS代码，可以使得不同成员之间的工作更加独立，减少冲突和协调成本，提高团队开发效率。

-4-. 可重用性和扩展性：通过合理分离代码，可以使代码更具可重用性和扩展性。例如，可以将一些通用的HTML模块封装为组件，使其在不同页面中重复使用。可以将通用的JavaScript函数封装为库或模块，方便在多个页面中共享和复用。CSS样式也可以封装为可复用的类，减少代码冗余。

-5-. 页面性能优化：将JavaScript文件和CSS文件单独引入，可以通过浏览器的缓存机制实现静态资源的复用，减少页面加载时间，并提高页面性能。另外，通过精确控制CSS的加载时机和通过异步加载JavaScript文件，可以进一步提升页面加载速度。

综上所述，合理分离HTML代码、JavaScript代码和CSS代码可以提高项目的可维护性、开发效率和团队协作能力，同时还具有可重用性、扩展性和性能优化等方面的作用。这种分离的做法是在前端开发中的一种常见的最佳实践。

3.4.2 代码整合

第在项目中创建一个专门放静态资源的文件(static)

再在静态资源的文件(static)中，创建css，js，images等等的静态资源

将html和js及css的代码分别放入静态资源文件中(static)

如图所示:

在静态资源js中创建index的js资源文件将jsp中的js代码全部放入index的js资源文件里

再在jsp页面进行引入index.js资源文件

最后整合的jsp及js代码如下

index.jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
  <%@include file="common/header.jsp" %>
  <!-- <script type="text/javascript" src="js/index.js"></script> -->
</head>
<script src="static/js/index.js"></script>
<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">
      </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>
</body>
</html>

index.js静态资源代码

let element,layer,util,$;
layui.use(['element', 'layer', 'util'], function(){
   element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
  $.ajax({
    url:"${pageContext.request.contextPath }/orders.action?methodName=menus",
    dataType:'json',
      success:function(data){
      /* console.log(data); */
      /* 定义标签要拼接的文本内容  */
      let datacontent = '';
      $.each(data,function(i,n){
        datacontent += ' <li class="layui-nav-item layui-nav-itemed">';
        datacontent +='<a class="" href="javascript:;">'+n.text+'</a>';
        /* console.log(n); */
        /* 判断是否有子节点有就进行子菜单增加，没有就不加 */
        if(n.hasChildren){
          datacontent +='<dl class="layui-nav-child">';
          /* 循环所有的子节点  n.children*/
          $.each(n.children,function(index,node){
             datacontent += '<dd><a href="javascript:;" onclick="AddTab(\''+node.text+'\',\''+node.attributes.tvp.url+'\',\''+node.id+'\')" >'+node.text+'</a></dd>'; 
          })
          datacontent += ' </dl> ';
        }
        datacontent += ' </li> ';
      })
      /* 重置里面的文本内容 */
      $("#menu").html(datacontent);
      element.render('menu');
    }
     });
  });
 /* 使用Layui的思路流程
  * 1.参考官网是否有该功能的控件，该控件模块是否可以在支持相对应的功能效果--为静态
  * 2.将官网的静态模块转换为相当应的动态功能(将静态选项卡转换为相对应左边菜单的功能动态选项卡)
  * 3.功能效果实现后进行修改/优化，使该功能融入到自己的项目中实现自己所需下效果
  *  3.1 将选项卡的名称对应左侧菜单
  *  3.2 重复选中的选项卡不会多次打开
  *  3.3  如果重复选中，就只显示选中的选项卡页面bg/listOrder1.jsp
  */
  function AddTab(title,content,id) {
   let $node = $('li[lay-id="'+id+'"]');
   if($node.length==0){
    //新增一个Tab项
          element.tabAdd('demo', {
            title: title //用于演示
            ,content: "<iframe frameborder='0' src='"+content+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
            ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
          })
   }
   element.tabChange('demo', id); //切换到：用户管理
}

最后给我们带来的效果如图(虽然有点停顿但请静心看效果):

给我们带来的收获

学习Layui的选项卡可以获得以下收获：

1. 快速搭建界面布局：Layui的选项卡组件提供了简单易用的选项卡功能，可以帮助开发者快速搭建具有选项卡切换功能的界面布局。无需从头编写代码，只需按照规定的HTML结构和调用选项卡组件的方式，就能轻松实现选项卡页面。

2. 提升用户交互体验：选项卡组件可以让用户方便地在不同的选项卡之间切换内容，使得信息展示和功能切换更加直观和高效。通过选项卡，用户可以快速访问所需的内容，提升了用户的交互体验和使用效率。

3. 可扩展性和自定义性：Layui的选项卡组件提供了丰富的API和配置选项，使得开发者可以根据项目需求进行自定义设置。可以调整选项卡的样式、添加图标、绑定自定义事件等，以及动态增删选项卡，这增加了组件的灵活性和可扩展性。

4. 学习前端组件设计思路：通过学习Layui的选项卡组件，可以了解和学习前端组件的设计思路和实现方式。掌握如何将组件的功能封装成易用的接口、如何实现状态管理和事件处理等方面的知识，有助于提升自己的前端开发技能。

5. 探索其他Layui组件：Layui是一个综合性的前端开发框架，除了选项卡组件外，还包含了众多其他实用的组件，如表单、弹层、表格等。学习Layui的选项卡组件可以为你打开学习和使用其他Layui组件的大门，进一步扩展你的前端开发能力和知识广度。

总结来说，学习Layui的选项卡组件可以帮助你快速实现选项卡布局、提升用户交互体验，并学习前端组件的设计思路。同时，这也可以为你打开学习和使用其他Layui组件的大门，丰富你的前端开发技能。

Layui的选项卡及菜单