选项卡切换-蒲公英云

选项卡切换

一个选项卡，意思就是切换选项，一个最简单的列子，爱玩手机和电脑的肯定用过，选项卡和滚动条我觉得是差不多一个意思，当然只是差不多，并不绝对。

因为两者都是屏幕高度不够，而设计出来的，不过选项卡是在一个页面切换多条类容，滚动条就是类容超出太多才会出来(懂我意思就好)。

选项卡推荐使用插件好一点，因为自己敲的话有点长，插件推荐layui。

<link href="~/HospitalOutpatient/layui/css/layui.css"rel="stylesheet" />

因为选项卡需要点击事件，所以还要引用js，js才是主要的，因为选项卡在layui插件里特别依赖element模块，至于为什么特别依赖，后面就知道了

<script src="~/HospitalOutpatient/layui/layui.js"></script>

插件需要自己下载，不知道去哪下载的，可以去layui官网下载。

先敲html部分，说真的，有插件之后，都不需要自己动手敲css部分。搞清楚是什么意思就行(不清楚就是另一个故事了)，
在这里插入图片描述
图片只有一半，和后面图一起看就是完整的。Js部分也在里面，

看到图中layui后面跟的，你得知道是什么意思(开玩笑)。

layui-bg-black：黑心背景图，英语black就是黑色的意思、
li标签上class加了一个伪类，改变字体颜色，还有加了一个向下的边框border-bottom，

Layui这些插件都有他们自己的js加载方式，我是这么理解的。
Js部分很简单，有插件很简单，都不敢相信，如果你没写element这个，那你js部分就全部失败（真的特别依赖）。

layui.use('element', function () {});

简直不敢相信只要敲着一句，插件就是这么简单，真心谢谢这些大佬。
在这里插入图片描述
Div标签和ul标签都可以，浮动也不需要加，不要问我为什么。

当你全部敲完之后，在检查一遍，运行。效果图
在这里插入图片描述

随便点击图中那个div它就会切换到那个div下面的类容。

就是这么简单。学会了吗

选项卡切换