页面元素之选项卡

1、选项卡

选项卡的长相和水平导航栏差不多，结构也差不多（导航栏class="layui-nav"，选项卡class="layui-tab "），但是导航栏往往指向一个新的网页（内嵌）,一般都作为功能区分，将一部分相似的功能集成到同一网页（参考上一篇水平导航示例）。
而选项卡指向的是div，并不会跳转到新的网页，所有内容都在同一网页上显示，它通常作为不同种类的区分，或者将导航栏集成过来的一部分功能进行区分。

---

例：
导航栏：生活缴费、信息管理、联系我们。。。
选项卡(生活缴费页面内的)：物业费、停车费、取暖费。。。

image.png

2、使用（默认选项卡）

选项卡是靠两个关联的div实现的，第一个div内部是

-
• ,
标签之间的内容是选项名称。第二个div内部是div，div内容就是选项对应要显示的内容。
• 和内容
  是按照顺序一一对应的。
  （1）加载模块：element模块，和导航栏的代码相同。
  （2）

  ：放

  -
  • 的div。
    （3）
    ：放内容div的div。
    （4）
  • 的layui-this，和内容div的layui-show一定要对应。他们表示网页加载后，直接默认显示的选项
  • 和内容
    。

    
        
        
        
        
        
    
    
        //标签div
        

          

            
A小区
            
B小区
            
C小区
            
D小区
          
          

            //内容div
            

                
                
A小区
            
            

                
                
B小区
            
            

                
                
C小区
            
            

                
                
D小区
            
          
        
    

测试结果：

默认显示A小区.png

点击B小区.png

点击C小区.png

3、其他风格

（1）极简选项卡
对标签div追加类 layui-tab-brief即可

默认A小区.png

（2）卡片风格
对标签div追加类 layui-tab-card即可

默认A小区.png

（3）响应式
当容器的宽度不足以显示全部的选项时，即会自动出现展开图标。

image.png

（4）可删除的选项卡
设置标签div的lay-allowClose属性为"true"即可

默认A小区.png

(5)这里面的属性可以组合使用
简洁风格可删除的选项卡

默认A小区.png