选项卡切换

ゞ浴缸里的玫瑰 2023-01-09 03:51 190阅读 0赞

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

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

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

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

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

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

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

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

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

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

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

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

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

就是这么简单。学会了吗

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MTUyMA_size_16_color_FFFFFF_t_70]: /images/20221119/04780ad6c7e64789ba9e90e9e3d2bf25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MTUyMA_size_16_color_FFFFFF_t_70 1]: /images/20221119/4569970c645646cdb4f98299aea430fb.png
[20210120200743290.png]: /images/20221119/1eedceb891174a81bac1d6b90de4803f.png