Tab选项页面的切换

开发工具与关键技术：Visual Studio 
作者：肖广斌
撰写时间：2019年6月16日

你们的项目中是否有一个页面里面需要放多个不同页面，不同页面中的表格信息也不同的需求呐，我的就有这个需求，在这里，我们可以选择layui插件中的tab选项卡-页面元素，引用layui插件中的element模块和对应的js，把样式调整一下，把表格放进去加载就能实现效果，下面我简单解释一下我实现的效果，如下图



首先把需要的页面搭建好，这里我只需要两个页面，还可以更多的，按自己需求即可，再把需要加载的表格放进去，这里我们用到的是layui插件里的class为“layui-tab-item”，没有这个类我们还是无法实现tab选项页面切换的效果，接着就是我们在初始化表格时的操作了，在加载初始化表格记得引用element模块，不然没法使用这个模块的内容，当样式和表格都准备好了，那就可以看见以下效果了，它默认加载的是第一个页面的内容，当点击禁忌食品设置时，它会切换到禁忌食品设置页面然后加载出相关内容，它们都是同级关系，一个页面里面可以放多个表格，这就看自己个人的需求了，这就是引用layui中的tab选项来实现页面切换的效果


其实还有很多方法可以实现这个效果，比如用for循环来遍历，当点击禁忌食品设置时，给它加上高亮的类，把原材料配置的内容隐藏，把禁忌食品的内容显示出来，for循环这里就不详细解释了，这节主要还是以layui中的element模块为主。