页面元素之选项卡
2020-04-05 本文已影响0人
小疏林er
1、选项卡
选项卡的长相和水平导航栏差不多，结构也差不多（导航栏class="layui-nav"，选项卡class="layui-tab "），但是导航栏往往指向一个新的网页（内嵌<a>）,一般都作为功能区分，将一部分相似的功能集成到同一网页（参考上一篇水平导航示例）。
而选项卡指向的是div，并不会跳转到新的网页，所有内容都在同一网页上显示，它通常作为不同种类的区分，或者将导航栏集成过来的一部分功能进行区分。
例：
导航栏：生活缴费、信息管理、联系我们。。。
选项卡(生活缴费页面内的)：物业费、停车费、取暖费。。。
image.png
2、使用（默认选项卡）
选项卡是靠两个关联的div实现的，第一个div内部是<ul>-<li>,<li></li>标签之间的内容是选项名称。第二个div内部是div，div内容就是选项对应要显示的内容。<li>和内容<div>是按照顺序一一对应的。
（1）加载模块：element模块，和导航栏的代码相同。
（2）<div class="layui-tab ">：放<ul>-<li>的div。
（3）<div class="layui-tab-content">：放内容div的div。
（4）<li>的layui-this，和内容div的layui-show一定要对应。他们表示网页加载后，直接默认显示的选项<li>和内容<div>。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
});
</script>
</head>
<body>
//标签div
<div class="layui-tab ">
<ul class="layui-tab-title layui-bg-green">
<li class="layui-this">A小区</li>
<li>B小区</li>
<li>C小区</li>
<li>D小区</li>
</ul>
<div class="layui-tab-content">
//内容div
<div class="layui-tab-item layui-show"style="text-align: center;">
<i class="layui-icon "style="font-size: 100px;"></i>
<h1>A小区</h1>
</div>
<div class="layui-tab-item"style="text-align: center;">
<i class="layui-icon "style="font-size: 100px;"></i>
<h1>B小区</h1>
</div>
<div class="layui-tab-item"style="text-align: center;">
<i class="layui-icon "style="font-size: 100px;"></i>
<h1>C小区</h1>
</div>
<div class="layui-tab-item"style="text-align: center;">
<i class="layui-icon "style="font-size: 100px;"></i>
<h1>D小区</h1>
</div>
</div>
</div>
</body>
</html>
测试结果：
默认显示A小区.png
点击B小区.png
点击C小区.png
3、其他风格
（1）极简选项卡
对标签div追加类 layui-tab-brief即可
<div class="layui-tab layui-tab-brief ">
默认A小区.png
（2）卡片风格
对标签div追加类 layui-tab-card即可
<div class="layui-tab layui-tab-card">
默认A小区.png
（3）响应式
当容器的宽度不足以显示全部的选项时，即会自动出现展开图标。
image.png
（4）可删除的选项卡
设置标签div的lay-allowClose属性为"true"即可
<div class="layui-tab" lay-allowClose="true">
默认A小区.png
(5)这里面的属性可以组合使用
简洁风格可删除的选项卡
<div class="layui-tab layui-tab-brief"lay-allowClose="true">
默认A小区.png
