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;">&#xe600;</i>
                <h1>A小区</h1>
            </div>
            <div class="layui-tab-item"style="text-align: center;">
                <i class="layui-icon "style="font-size: 100px;">&#xe609;</i>
                <h1>B小区</h1>
            </div>
            <div class="layui-tab-item"style="text-align: center;">
                <i class="layui-icon "style="font-size: 100px;">&#xe636;</i>
                <h1>C小区</h1>
            </div>
            <div class="layui-tab-item"style="text-align: center;">
                <i class="layui-icon "style="font-size: 100px;">&#xe62e;</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