layui之Tab选项卡 - 页面元素 - 好文

默认Tab选项卡 <>

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

<div class="layui-tab"> <ul class="layui-tab-title"> <li
class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li>
<li>订单管理</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 class="layui-tab-item">内容4</div> <div
class="layui-tab-item">内容5</div> </div> </div> <script> //注意：选项卡依赖 element
模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element;
//… }); </script>
Tab简洁风格 <>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> <ul
class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li>
<li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div
class="layui-tab-content"></div> </div>
通过追加class：layui-tab-brief 来设定简洁风格。
值得注意的是，如果存在 layui-tab-item
的内容区域，在切换时自动定位到对应内容。如果不存在内容区域，则不会定位到对应内容。你通常需要设置过滤器，通过 element
模块的监听tab事件来进行切换操作。详见文档左侧【内置组件 - 基本元素操作 element】

Tab卡片风格 <>

<div class="layui-tab layui-tab-card"> <ul class="layui-tab-title"> <li
class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li>
<li>订单管理</li> </ul> <div class="layui-tab-content" style="height: 100px;"> <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> <div class="layui-tab-item">6</div> </div> </div>
通过追加class：layui-tab-card来设定卡片风格

Tab响应式 <>

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

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

带删除的Tab <>

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

<div class="layui-tab" lay-allowClose="true"> <ul class="layui-tab-title"> <li
class="layui-this">网站设置</li> <li>用户基本管理</li> <li>权限分配</li>
<li>全部历史商品管理文字长一点试试</li> <li>订单管理</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
class="layui-tab-item">4</div> <div class="layui-tab-item">5</div> <div
class="layui-tab-item">6</div> </div> </div>
与默认相比没有什么特别的结构，就是多了个属性 lay-allowClose="true"

ID焦点定位 <>

你可以通过对选项卡设置属性 lay-id="xxx" 来作为唯一的匹配索引，以用于外部的定位切换，如后台的左侧导航、以及页面地址 hash的匹配。
<div class="layui-tab" lay-filter="test1"> <ul class="layui-tab-title"> <li
class="layui-this" lay-id="111" >文章列表</li> <li lay-id="222">发送信息</li> <li
lay-id="333">权限分配</li> <li lay-id="444">审核</li> <li lay-id="555">订单管理</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 class="layui-tab-item">4</div> <div
class="layui-tab-item">5</div> </div> </div>
属性 lay-id 是扮演这项功能的主要角色，它是动态操作的重要凭据，如：
<script> layui.use('element', function(){ var element = layui.element;
//获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值 var layid =
location.hash.replace(/^#test1=/, ''); element.tabChange('test1', layid);
//假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项 //监听Tab切换，以改变地址hash值
element.on('tab(test1)', function(){ location.hash = 'test1='+
this.getAttribute('lay-id'); }); }); </script>
同样的还有增加选项卡和删除选项卡，都需要用到 lay-id

提示 <>

无论是导航、还是Tab，都需依赖 element模块，大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如Tab事件监听等，需按照场景选择性使用。

选项卡的全部代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title>
<meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1"> <link rel="stylesheet"
href="//res.layui.com/layui/dist/css/layui.css" media="all">  </head> <body> <fieldset
class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>默认风格的Tab</legend> </fieldset> <div class="layui-tab"> <ul
class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li>
<li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content">
<div class="layui-tab-item layui-show"> 1. 高度默认自适应，也可以随意固宽。 <br>2.
Tab进行了响应式处理，所以无需担心数量多少。 </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> </div> </div> <fieldset
class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>动态操作Tab</legend> </fieldset> <div class="layui-tab" lay-filter="demo"
lay-allowclose="true"> <ul class="layui-tab-title"> <li class="layui-this"
lay-id="11">网站设置</li> <li lay-id="22">用户管理</li> <li lay-id="33">权限分配</li> <li
lay-id="44">商品管理</li> <li lay-id="55">订单管理</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 class="layui-tab-item">内容4</div> <div class="layui-tab-item">内容5</div>
</div> </div> <div class="site-demo-button" style="margin-bottom: 0;"> <button
class="layui-btn site-demo-active" data-type="tabAdd">新增Tab项</button> <button
class="layui-btn site-demo-active" data-type="tabDelete">删除：商品管理</button>
<button class="layui-btn site-demo-active"
data-type="tabChange">切换到：用户管理</button> </div>  <ins
class="adsbygoogle" style="display:inline-block;width:970px;height:90px"
data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>Hash地址定位</legend> </fieldset> <div class="layui-tab" lay-filter="test">
<ul class="layui-tab-title"> <li class="layui-this" lay-id="11">网站设置</li> <li
lay-id="22">用户管理</li> <li lay-id="33">权限分配</li> <li lay-id="44">商品管理</li> <li
lay-id="55">订单管理</li> </ul> <div class="layui-tab-content"> <div
class="layui-tab-item layui-show"> 点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项
</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> </div> </div> <fieldset
class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>简洁风格的Tab</legend> </fieldset> <div class="layui-tab layui-tab-brief"
lay-filter="docDemoTabBrief"> <ul class="layui-tab-title"> <li
class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li>
<li>订单管理</li> </ul> <div class="layui-tab-content" style="height: 100px;"> <div
class="layui-tab-item layui-show">内容不一样是要有，因为你可以监听tab事件（阅读下文档就是了）</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> </div>
</div> <fieldset class="layui-elem-field layui-field-title" style="margin-top:
50px;"> <legend>卡片风格的Tab</legend> </fieldset> <div class="layui-tab
layui-tab-card"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li>
<li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div
class="layui-tab-content" style="height: 100px;"> <div class="layui-tab-item
layui-show">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</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> <div
class="layui-tab-item">6</div> </div> </div> <fieldset class="layui-elem-field
layui-field-title" style="margin-top: 50px;"> <legend>当Tab数超过一定宽度</legend>
</fieldset> <div class="layui-tab layui-tab-card" style="width: 290px;"> <ul
class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li>
<li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content"
style="height: 100px;"> <div class="layui-tab-item layui-show"> 1.
宽度足够，就不会出现右上图标；宽度不够，就会开启展开功能。 <br>2. 如果你的宽度是自适应的，Tab会自动判断是否需要展开，并适用于所有风格。
</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> <div
class="layui-tab-item">6</div> </div> </div> <fieldset class="layui-elem-field
layui-field-title" style="margin-top: 50px;"> <legend>带删除功能的Tab</legend>
</fieldset> <div class="layui-tab layui-tab-card" lay-allowclose="true"> <ul
class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户基本管理</li>
<li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content"
style="height: 150px;"> <div class="layui-tab-item layui-show"> 1.
我个人比较喜欢卡片风格的，所以你发现又是以卡片的风格举例 2. 删除功能适用于所有风格 </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> <div
class="layui-tab-item">6</div> </div> </div> <script
src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>  <script> layui.use('element', function(){
var $ = layui.jquery ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
//触发事件 var active = { tabAdd: function(){ //新增一个Tab项 element.tabAdd('demo', {
title: '新选项'+ (Math.random()*1000|0) //用于演示 ,content: '内容'+
(Math.random()*1000|0) ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下 }) }
,tabDelete: function(othis){ //删除指定Tab项 element.tabDelete('demo', '44');
//删除：“商品管理” othis.addClass('layui-btn-disabled'); } ,tabChange: function(){
//切换到指定Tab项 element.tabChange('demo', '22'); //切换到：用户管理 } };
$('.site-demo-active').on('click', function(){ var othis = $(this), type =
othis.data('type'); active[type] ? active[type].call(this, othis) : ''; });
//Hash地址的定位 var layid = location.hash.replace(/^#test=/, '');
element.tabChange('test', layid); element.on('tab(test)', function(elem){
location.hash = 'test='+ $(this).attr('lay-id'); }); }); </script> </body>
</html>

热门工具换一换