layui官网对tab选项卡的介绍比较简单
3个重要的样式缺一不可：layui-tab layui-tab-title layui-tab-content

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  <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>
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
</script>
这是最基本的切换功能，如果想要更加灵活的运用好Tab选项，就必须要了解layui里面的element模块。
 
首先给带有layui-tab样式的元素添加lay-filter属性值，接下来就可以通过element对tab进行一系列的操作了；
element.tabAdd(filter, options);filter是lay-filter的值，options可以编辑内容和标题
 {
 id: //layui-tab-title列表中对应的lay-id的值
 ，titile://选项标题
 ,content: //内容区块，可以是iframe
 }
element.tabDelete(filter, layid);删除指定（传lay-id属性值）Tab选项，这个没什么好说的
element.tabChange(filter, layid);切换到指定的Tab选项
 
前端html页面layui下载地址
 
 div class="layui-side" >
    <div class=" layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree"  lay-filter="test" style="background-color:#FFFFFF;">
            <li class="layui-nav-item" style="background-color: #3A5C82;">
                <a class="" href="javascript:;">列表1</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" id="menu_three">列表1-1</a>
                        <ol class="layui-nav-child"  >
                            <li style="background-color: #3A5C82;">
                                <!-- 菜单栏的数据一般需要从后台获取-->
                                <a class="site-tab-active" data-id="1" data-title="列表1-1-1" data-url="menu1.html">列表1-1-1</a>
                                <a class="site-tab-active" data-id="2" data-title="列表1-1-2" data-url="menu2.html">列表1-1-2</a>
                                <a class="site-tab-active" data-id="3" data-title="列表1-1-3" data-url="menu3.html">列表1-1-3</a>
<div class="page-content">
    <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="true">
        <ul class="layui-tab-title">
        <ul class="rightmenu" style="position: absolute;display: none;font-size: 12px;font-family: 'Microsoft Yahei';">
            <li data-type="closethis">关闭当前</li>
            <li data-type="closeall">关闭所有</li>
        <div class="layui-tab-content">
 layui.use(['element','jquery'], function(){
        var element = layui.element,$=layui.jquery;
        //当点击有site-tab-active属性的标签时，即左侧菜单栏（可以是无限菜单栏）中内容 ，触发点击事件
        $('.site-tab-active').on('click', function() {
            var dataid = $(this);
            //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                //如果比零小，则直接打开新的tab项
                element.tabAdd('xbs_tab',{
                    title:dataid.attr("data-title"),
                    content:'<iframe data-frameid="'+dataid.attr("data-id")+'" scrolling="auto" frameborder="0" src="'+dataid.attr("data-url")+'" style="width:100%;height:99%;"></iframe>',
                    id:dataid.attr("data-id")
            } else {
                //否则判断该tab项是否以及存在
                var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                        isData = true;
                if (isData == false) {
                    //标志为false 新增一个tab项
                    element.tabAdd('xbs_tab',{
                        title:dataid.attr("data-title"),
                        content:'<iframe data-frameid="'+dataid.attr("data-id")+'" scrolling="auto" frameborder="0" src="'+dataid.attr("data-url")+'" style="width:100%;height:99%;"></iframe>',
                        id:dataid.attr("data-id")
            //最后不管是否新增tab，最后都转到要打开的选项页面上
            element.tabChange('xbs_tab',dataid.attr('data-id'))
                    layui官网对tab选项卡的介绍比较简单3个重要的样式缺一不可：layui-tab  layui-tab-title  layui-tab-content&amp;amp;lt;div class=&amp;quot;layui-tab&amp;quot;&amp;amp;gt;  &amp;amp;lt;ul class=&amp;quot;layui-tab-title&amp;quot;&amp;amp;gt;    &amp;amp;lt;li class=&amp;quot;layui-
				
layui tab选项卡
我们在做项目的时候会遇到大小模块的划分
在一个页面中布置一个大模块的多个小模块的时候通常就会用到tab选项卡进行小模块间的切换处理
在这里我就给大家介绍layui插件里的tab选项卡的风格设置与使用
首先我们得引入layui的css与js插件
layui tab选项卡的使用是直接给标签赋予相应的类名
然而赋予相应的类名形成选项卡必需先在脚本中加载layui的...
最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。
导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。
依赖加载组件：element （请注意：必须加载element模块
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',
				
效果图如下，主要实现tab页的新增、删除功能，点击删除按钮时若
删除对象为最后一个tab页则取消之。
根据官网的文档，可以使用组件中的事件来实现这一功能，但是增加的按钮位置不是我们想要的，删除时也无法保留最后一个tab页，这些需要我们自己改写一下。
代码实现：
 <el-tabs v-model="editableTabsValue" type="card"  @tab-click="clickTab" @tab-remove="removeTab" :before-leave="beforeLea
  <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>
JavaScript 代码：
// 注意：需要引入 layui 模块
layui.use('element', function(){
  var element = layui.element;
这个示例中，我们使用了 layui-tab 组件来创建一个选项卡。其中，`ul` 标签中的 `li` 标签表示选项卡的标题，`div` 标签中的 `layui-tab-item` 类表示选项卡的内容。在 JavaScript 代码中，我们使用了 layui 模块的 `element` 方法来初始化选项卡。