Tab选项卡 - 页面元素

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。

依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用，详见：内置组件 - 常用元素操作）

默认Tab选项卡

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

选项卡 Tabs 切换 - 图1

如果需要对Tab进行外部新增、删除、切换等操作，请移步到“内置组件-常用元素操作”页面中查阅：基础方法

  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.  
  18. <script>
  19. //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
  20. layui.use('element', function(){
  21.   var element = layui.element;
  22.  
  23.   //…
  24. });
  25. </script>
  26.

Tab简洁风格

选项卡 Tabs 切换 - 图2

  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>      
  11.

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

Tab卡片风格

选项卡 Tabs 切换 - 图3

  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>
  18.

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

Tab响应式

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

选项卡 Tabs 切换 - 图4

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

带删除的Tab

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

选项卡 Tabs 切换 - 图5

  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>
  18.

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

ID焦点定位

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

  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>
  17.

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

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

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

提示

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

layui - 用心与你沟通