搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

Tab选项卡 - 页面元素

导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能。面包屑结构简单,支持自定义分隔符。
依赖加载组件:element (请注意:必须加载element模块,相关功能才能正常使用,详见:内置组件 - 常用元素操作)

Tab广泛应用于Web页面,因此我们也对其进行了良好的支持。Layui内置多种Tab风格,支持删除选项卡、并提供响应式支持。
这是一个最基本的例子:

  • 网站设置
  • 用户管理
  • 权限分配
  • 商品管理
  • 订单管理
如果需要对Tab进行外部新增、删除、切换等操作,请移步到“内置组件-常用元素操作”页面中查阅:基础方法
内容2
内容3
内容4
内容5

对应的HTML结构code

  1. <div class="layui-tab">
  2. <ul class="layui-tab-title">
  3. <li class="layui-this">网站设置</li>
  4. <li>用户管理</li>
  5. <li>权限分配</li>
  6. <li>商品管理</li>
  7. <li>订单管理</li>
  8. </ul>
  9. <div class="layui-tab-content">
  10. <div class="layui-tab-item layui-show">内容1</div>
  11. <div class="layui-tab-item">内容2</div>
  12. <div class="layui-tab-item">内容3</div>
  13. <div class="layui-tab-item">内容4</div>
  14. <div class="layui-tab-item">内容5</div>
  15. </div>
  16. </div>
  17. <script>
  18. //注意:选项卡 依赖 element 模块,否则无法进行功能性操作
  19. layui.use('element', function(){
  20. var element = layui.element;
  21. //…
  22. });
  23. </script>
  • 网站设置
  • 用户管理
  • 权限分配
  • 商品管理
  • 订单管理

对应的HTML结构code

  1. <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  2. <ul class="layui-tab-title">
  3. <li class="layui-this">网站设置</li>
  4. <li>用户管理</li>
  5. <li>权限分配</li>
  6. <li>商品管理</li>
  7. <li>订单管理</li>
  8. </ul>
  9. <div class="layui-tab-content"></div>
  10. </div>

通过追加class:layui-tab-brief 来设定简洁风格。
值得注意的是,如果存在 layui-tab-item 的内容区域,在切换时自动定位到对应内容。如果不存在内容区域,则不会定位到对应内容。你通常需要设置过滤器,通过 element模块的监听tab事件来进行切换操作。详见文档左侧【内置组件 - 基本元素操作 element】

  • 网站设置
  • 用户管理
  • 权限分配
  • 商品管理
  • 订单管理
1
2
3
4
5
6

对应的HTML结构code

  1. <div class="layui-tab layui-tab-card">
  2. <ul class="layui-tab-title">
  3. <li class="layui-this">网站设置</li>
  4. <li>用户管理</li>
  5. <li>权限分配</li>
  6. <li>商品管理</li>
  7. <li>订单管理</li>
  8. </ul>
  9. <div class="layui-tab-content" style="height: 100px;">
  10. <div class="layui-tab-item layui-show">1</div>
  11. <div class="layui-tab-item">2</div>
  12. <div class="layui-tab-item">3</div>
  13. <div class="layui-tab-item">4</div>
  14. <div class="layui-tab-item">5</div>
  15. <div class="layui-tab-item">6</div>
  16. </div>
  17. </div>

通过追加class:layui-tab-card来设定卡片风格

当容器的宽度不足以显示全部的选项时,即会自动出现展开图标,如下以卡片风格为例(注意:所有Tab风格都支持响应式):

  • 网站设置
  • 用户管理
  • 权限分配
  • 商品管理
  • 订单管理
1
2
3
4
5
6

额,感觉像是打了个小酱油。而事实上在自适应的页面中(不固宽),它的意义才会呈现。

你可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除

  • 网站设置
  • 用户基本管理
  • 权限分配
  • 全部历史商品管理文字长一点试试
  • 订单管理
1
2
3
4
5
6

对应的HTML结构code

  1. <div class="layui-tab" lay-allowClose="true">
  2. <ul class="layui-tab-title">
  3. <li class="layui-this">网站设置</li>
  4. <li>用户基本管理</li>
  5. <li>权限分配</li>
  6. <li>全部历史商品管理文字长一点试试</li>
  7. <li>订单管理</li>
  8. </ul>
  9. <div class="layui-tab-content">
  10. <div class="layui-tab-item layui-show">1</div>
  11. <div class="layui-tab-item">2</div>
  12. <div class="layui-tab-item">3</div>
  13. <div class="layui-tab-item">4</div>
  14. <div class="layui-tab-item">5</div>
  15. <div class="layui-tab-item">6</div>
  16. </div>
  17. </div>

与默认相比没有什么特别的结构,就是多了个属性 lay-allowClose="true"

你可以通过对选项卡设置属性 lay-id="xxx" 来作为唯一的匹配索引,以用于外部的定位切换,如后台的左侧导航、以及页面地址 hash的匹配。

对应的HTML结构code

  1. <div class="layui-tab" lay-filter="test1">
  2. <ul class="layui-tab-title">
  3. <li class="layui-this" lay-id="111" >文章列表</li>
  4. <li lay-id="222">发送信息</li>
  5. <li lay-id="333">权限分配</li>
  6. <li lay-id="444">审核</li>
  7. <li lay-id="555">订单管理</li>
  8. </ul>
  9. <div class="layui-tab-content">
  10. <div class="layui-tab-item layui-show">1</div>
  11. <div class="layui-tab-item">2</div>
  12. <div class="layui-tab-item">3</div>
  13. <div class="layui-tab-item">4</div>
  14. <div class="layui-tab-item">5</div>
  15. </div>
  16. </div>

属性 lay-id 是扮演这项功能的主要角色,它是动态操作的重要凭据,如:

</>code

  1. <script>
  2. layui.use('element', function(){
  3. var element = layui.element;
  4. //获取hash来切换选项卡,假设当前地址的hash为lay-id对应的值
  5. var layid = location.hash.replace(/^#test1=/, '');
  6. element.tabChange('test1', layid); //假设当前地址为:http://a.com#test1=222,那么选项卡会自动切换到“发送消息”这一项
  7. //监听Tab切换,以改变地址hash值
  8. element.on('tab(test1)', function(){
  9. location.hash = 'test1='+ this.getAttribute('lay-id');
  10. });
  11. });
  12. </script>

同样的还有增加选项卡和删除选项卡,都需要用到 lay-id,更多动态操作请阅读:element模块

无论是导航、还是Tab,都需依赖 element模块,大部分行为都是在加载完该模块后自动完成的,但一些交互操作,如Tab事件监听等,需按照场景选择性使用。你可以移步文档左侧【内置组件 - 基本元素操作 element】了解详情

layui - 在每一个细节中,用心与你沟通