layui的Tab选项卡知识

layui的公共类:

lay-filter=" "

事件过滤器。你可能会在很多地方看到他，他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器

layui的公共属性:

layui-show属性:显示页面元素

tab选项卡介绍:

tab选项卡，可用于一个界面点击，显示另一个界面的内容   重要

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

基础类:

layui-tab:放在div中定义一个tab选项卡
layui-tab-card:放在带有layui-tab的div后面，表示一个卡片风格的选项卡
layui-tab-title:放在ul中定义一个选项卡菜单
layui-this:放在ul的第一个li中定义选项卡的菜单项
layui-tab-content:放在div中定义选项卡的菜单项的对应的具体内容区域
layui-tab-item:放在带有layui-tab-content的div里面，定义每个菜单项的具体内容
layui-show:放在带有layui-tab-item的div的第一个div里面  进入第一个菜单项页面不用点击直接显示itme区域的内容
lay-allowClose属性:你可以对父层容器(带layui-tab的div)设置属性 lay-allowClose="true" 来允许Tab选项卡被删除
注意：
值得注意的是，如果存在 layui-tab-item 的内容区域，在切换时自动定位到对应内容。如果不存在内容区域，则不会定位到对应内容。
你通常需要设置过滤器，通过 element模块的监听tab事件来进行切换操作。详见文档

eg:基础tab选项卡

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
 
<!-- 你的HTML代码 -->
<div class="layui-tab">
	<ul class="layui-tab-title">
		<li class="layui-this">网站设置</li>
		<li>用户管理</li>
		<li>权限控制</li>
	</ul>
	<div class="layui-tab-content">
		<div class="layui-tab-item layui-show">写网站设置界面的内容</div>
		<div class="layui-tab-item">写用户管理界面的内容</div>
		<div class="layui-tab-item">写权限控制的页面的内容</div>
	</div>
</div>
 
<script src="layui/layui.js"></script>
<script>
//加载模块
layui.use(['layer','compent','element'],function(){
	var layer = layui.layer;
	var element = layui.element;
	layer.msg("风继续吹!");
})
</script> 
</body>
</html>

卡片风格选项卡(带可删除的tab)

<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: 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>

ID焦点定位重点

hash（哈希)

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

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