Tab选项卡

Tab选项卡
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Intelli JIDEA 2021.1 Java
作者：李泳锟
撰写时间：2021-06-08
Tab广泛应用于Web页面，因此我们也对其进行了良好的支持。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。
导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。其依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用。）
以下为默认Tab选项卡 :
相应代码 :
<div>
<ul> //注意:在哪里，哪里就是默认开始位置
<li>个人资料</li>
<li>填写资料</li>
<li>会员注册</li>
<li>个人认证</li>
</ul>
<div>
<div>内容1</div>
<div>内容2</div>
<div class="layui-tab-item layui-show">内容3</div>
<divclass="layui-tab-item">内容4</div>
</div>
</div>
<script>
//注意：选项卡依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
varelement = layui.element;
//…
});
</script>
Tab简洁风格 :
相应代码 :
<div class="layui-tab layui-tab-brief"lay-filter="docDemoTabBrief">
<ul> //注意:在哪里，哪里就是默认开始位置
<li>基础信息</li>
<li>我的交易</li>
<li>我的资产</li>
<li>我的服务</li>
</ul>
<div></div>
</div>
// 注意：选项卡依赖 element 模块，否则无法进行功能性操作
通过追加class：layui-tab-brief 来设定简洁风格。
值得注意的是，如果存在 layui-tab-item 的内容区域，在切换时自动定位到对应内容。如果不存在内容区域，则不会定位到对应内容。你通常需要设置过滤器，通过 element模块的监听tab事件来进行切换操作。
带删除的Tab :
你可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除
<divlay-allowClose="true">
<ul> //注意:在哪里，哪里就是默认开始位置
<li>个人资料</li>
<li>填写资料</li>
<li>会员注册</li>
<li>个人认证</li>
</ul>
<div>
<div class="layui-tab-item layui-show">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
// 注意：选项卡依赖 element 模块，否则无法进行功能性操作
与默认相比没有什么特别的结构，就是多了个属性 lay-allowClose="true"