实现简单的选项卡效果

实现简单的选项卡效果

开发工具与关键技术：VS2015、layUI
作者：易金亮
撰写时间：2019.06.03

说到选项卡，我相信大家并不陌生，随便浏览一个网页或者一个工具软件什么的都可以找到有选项卡的使用，比如我现在用来编辑这个文档的Word其工具栏就是一个选项卡模式，在比如我最近在做到一个项目中就有多处使用到选项卡，既然选项卡运用如此广泛，那选项卡效果又是如何实现的呢？下面我就用我最近做的一个项目中的一个简单的例子来介绍如何实现选项卡效果，首先我们来看一下效果图，如下截图所示：

（图1）
如上截图所示，这就是我最近做的一个项目中要实现的一个选项卡效果，这是一个卡片风格的选项卡，下面我就来说说我是如何实现这个效果的，这里我用到了layUI组件，所以我们首先要把layUI组件引入到我们的项目中，其组件具体如何引入这里就不详细介绍了，把组件引入到项目中之后接下来就该去实现上图所示的效果了，就是点击其选项可以进行切换，其实现的代码如下图所示：

（图2）
如上图所示，其核心代码的布局就是这样了，我们在最外层div中放了两个类，分别是“layui-tab”和“layui-tab-card”，其中layui-tab来定义这是一个选项卡容器，而layui-tab-card则用来设定卡片风格，然后我们在最外层div中分别放了一个ul标签和一个div，并且在ul标签中给了一个类“layui-tab-title”用了定义选项，在div中给了一个类“layui-tab-content”来表示存放内容区域的一个“盒子”，最后在ul标签中放了三个li标签，分别代表三个选项，并且给了一个类“layui-this”，当我们切换到哪个选项时这个类就跳转到哪个选项上面，这样就能实现一个选项卡的效果了，接着在div中再放入几个div，分别代表着与其选项相对应的几个内容区域，分别给了这几个div一个类“layui-tab-item”代表内容区域，并且我们还在其中一个div上给了一个单独的类“layui-show”，当我们选择某个选项时，这个类就跳转到与其选项相对应的内容区域div上，这样就能控制内容区域跟其选项一起切换了，其内容区域的内容就跟据其具体情况去定义了，在这里就不一一去展示了，还有其样式也根据个人喜好去设置就行了，这里也不多介绍了。通过以上代码就可以实现如下图所示的一个效果了：

（图3）
如上截图所示，这个效果是不是和项目要求的效果基本一样了，当然，光这样是没有选项切换的效果的，我们还无法进行功能性操作，那这是为什么呢？因为我们用的是layui组件，在layui中，选项卡依赖的是element模块，在此，我们还没有对element模块进行加载，所以任何功能性操作都执行不了。那我们应该如何去加载element模块呢？其实加载element模块非常简单，我们只需要在项目的JS部分加入如下截图所示的代码就可以了：

（图4）
通过如上截图所示的代码，我们就完成了element模块的加载了，这个时候，如果不出意外的话，我们的选项卡效果就实现了，其基本的功能性操作也能正常执行了，这时候，我们点击其他选项时就能进行切换了，其效果如下截图所示：

（图5）
如上截图所示，我们的选项卡效果就成功完成了，其效果见（图三和图五）。当然，tab选项卡不止这一种类型，我们可以给它添加一些其它的特殊的类从而实现更多其它的功能，比如我们可以对父层容器设置属性 lay-allowClose=“true” 来允许Tab选项卡被删除，其它的这里就不多讲了，我们可以根据项目的具体要求去设置。