一个选项卡,意思就是切换选项,一个最简单的列子,爱玩手机和电脑的肯定用过,选项卡和滚动条我觉得是差不多一个意思,当然只是差不多,并不绝对。
因为两者都是屏幕高度不够,而设计出来的,不过选项卡是在一个页面切换多条类容,滚动条就是类容超出太多才会出来(懂我意思就好)。
选项卡推荐使用插件好一点,因为自己敲的话有点长,插件推荐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下面的类容。
就是这么简单。学会了吗