Layui中选项卡的使用

因为项目需要用到选项卡，所以使用了layui插件中的选项卡功能，感觉还不错，所以分享给大家

首先给大家分享一下JS的代码

初始化选项卡的插件

这里面有2个很重要的方法，就是element.tabAdd和element.tabChange，前者为新增选项卡的方法，后者为新增后跳转到指定选项卡的方法

然后

就是要当我点击页面某些标签时，要选择选项卡

就需要获取到他们标签中的数据

所以在构建Html代码时，需要自己手动添加4个属性

data-type: tabAdd

为上面图片中active为tabAdd名称

data-url：/Huitubezhang/EverydayIncomeExpend/EverydayIncomeExpend

为上面嵌套的页面的路径

data-id

为上面需要用于跳转的指定选项卡

data-title

为选项卡的名字

而这个方法就是判断该标签是否已经有选项卡了，如果有就跳转到这个标签选项卡的内容中，如果没有就新增一个选项卡
在这里插入图片描述

需要注意的是，Html中的代码需要什么样的格式

这是需要添加选项卡的标签

这是选项卡和控制器添加后的位置

其中JS部分参考与一位大佬