1. Tab选项卡广泛应用于Web页面, 因此我们也对其进行了良好的支持。Layui内置多种Tab风格, 支持删除选项卡、并提供响应式支持。
2. 选项卡依赖加载组件: element。
3. 选项卡使用
| 名称 |
组合 |
| 默认 |
class="layui-tab" |
| 选项卡标题容器 |
class="layui-tab-title" |
| 指向当前选项卡标题 |
class="layui-this" |
| 选项卡内容容器 |
class="layui-tab-content" |
| 选项卡内容项 |
class="layui-tab-item" |
| 展示选项卡内容项 |
class="layui-tab-item layui-show" |
4. 默认Tab选项卡
4.1. 值得注意的是, 如果存在layui-tab-item的内容区域, 在切换时自动定位到对应内容。如果不存在内容区域, 则不会定位到对应内容。
4.2. 实例
<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>5. Tab简洁风格
5.1. 通过追加class: layui-tab-brief来设定简洁风格。
<div class="layui-tab layui-tab-brief">
<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>6. Tab卡片风格
6.1. 通过追加class: layui-tab-card来设定卡片风格。
<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>
</div>7. 带删除的Tab
7.1. 你可以对父层容器设置属性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>
</div>8. ID焦点定位
8.1. 你可以通过对选项卡设置属性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>8.2. 属性lay-id是扮演这项功能的主要角色, 它是动态操作的重要凭据, 如:
<script type="text/javascript">
// 注意: 选项卡依赖element模块, 否则无法进行功能性操作
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>8.3. 同样的还有增加选项卡和删除选项卡, 都需要用到lay-id。
9. 例子
9.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选项卡 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<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>
<div class="layui-tab layui-tab-brief">
<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>
<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>
</div>
<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>
</div>
<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>
<script type="text/javascript">
// 注意: 选项卡依赖element模块, 否则无法进行功能性操作
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>
</body>
</html>9.2. 效果图
