Tab选项卡

作者：李国林
在现在的目前来说，我所接触到的网页也好，还是系统也好，等等，我们所看到的都是有很多的tab选项卡来组成的页面，特别是电脑版的一些软件，几乎都有这个选项卡，就好像，为了更方便找到想要的，但又不用跳转页面，因此这个选项卡，而且这样也比较有特色，更不用次次都要弹出模态框，只需要切换到相应的项里就可以去，找到自己想要的内容。
好了，该进入正题了，因为做这个选项卡，肯定需要代码才能做出来，而做出来之后，他就可以切换了吗？这个是不可能的，因为切换需要需要事件来切换才行，因此就需要切换的监听方法才可以，而下面我会把layui的tab选项卡的其中的一个例子放进来，因为，tab选项卡，在很多的，网页，软件，系统都出现很多，所以，这个对于开发人员来说是很重要的，因此，学会他，才是硬道理。
下面是代码，但如果想要实现下图的tab选项卡的效果图那样，前提要把layui的插件放进去才行，这才是关键的一个步骤，然后，就是把内容代码放进去(因图片太大，所以不截图，直接放代码)。
代码：

4. 网站设置
6. 用户管理
8. 权限分配
10. 商品管理
12. 订单管理

上面写的代码就是下图的例子，当然，还不止这些，因为，现在引入了layui后，并且写完了上述所写的代码，最多也就是个不会切换的一个静态图片似的，而要它能切换不同的内容，就要使用js的代码进行监听，这里已经不是直接写切换事件了，而是监听了，因为，layui插件里已经有css的样式了，而我们要用就要它进行监听即可使用。下面的是js的代码
Js：

上述代码便是js的代码，这个是一个监听事件，因此做完了这些事件之后才算可以进行切换功能，而js的代码那里有id，因此要看好是否与css样式的id一样才可以，否则事件无法进行切换，并且出现点击出现无效。就像在点击静态图一样。

想了又想还是把样式图给截下来吧。

因例子来源于layui官网。因此是一样的。但其他内容属于原创。