layui tab选项卡_layui-tab-content

layui tab选项卡

我们在做项目的时候会遇到大小模块的划分
在一个页面中布置一个大模块的多个小模块的时候通常就会用到tab选项卡进行小模块间的切换处理
在这里我就给大家介绍layui插件里的tab选项卡的风格设置与使用
首先我们得引入layui的css与js插件
如下两图


layui tab选项卡的使用是直接给标签赋予相应的类名
然而赋予相应的类名形成选项卡必需先在脚本中加载layui的element模块才能有效果
如下图是加载element模块的代码

再如下图制作选项卡代码
图中layui-tab这个类名代表的意思是选项卡，所以设置选项卡layui-tab类是必需的
然后layui-tab-title代表的是选项卡的选项名称，
layui-tab-content代表的是选项卡的选项内容，
这两个类是配合起来使用的，实现整个选项卡之间的切换
layui-tab-item类指定了选项卡的内容，你要想显示什么内容就必需设置该类
选项卡名称与选项卡内容联系也是通过layui-tab-item这个类来实现的
有了layui-tab-item这个类他就可以通过for循环的方式进行名称与内容的一一对应
layui-this与layui-show这两个类实现的功能是选项卡的首显示名称与内容
如下图是完成的选项卡默认风格效果图

当然layui的选项卡还有两种风格的效果图
首先是简约风格效果图

效果图实现的代码图

从图中可以看出是在默认风格的基础上加了简约风格类layui-tab-brief
然后是卡片风格的效果图

效果图实现的代码图

从图中可以看出是在默认风格的基础上加了卡片风格类layui-tab-card
最后layui tab选项卡就讲那么多了
需要使用或感兴趣的快来试试吧！