layui的tab选项卡

Tab切换卡

开发工具与关键技术:MVC
作者:邱慧敏
撰写时间:2019.05.27

效果图:
在这里插入图片描述
在这里插入图片描述
Layui的tab切换卡,里面居然隐藏着一个关键模块,可以说如果没有这个声明的模块,那切换的功就不能实现。
下面就说说在body里的代码结构:最外层先给一个 class=“layui-tab” 里面有两层,一个是用ul标签装切换卡的表头(名称),一个是div包裹着的内容,如图:
在这里插入图片描述
很明显ul标签里面装的就是用li标签装的“线上订单”和“线下订单”:

<ul class="layui-tab-title">
   <li class="layui-this">线上订单</li>
   <li>线下订单</li>
</ul>

而第二个div标签里面装的肯定就是,“线上订单”下方的内容和“线下订单”下方的内容:
在这里插入图片描述
下面就是重点了,以上内容只能说明你把页面结构和页面内容给打好了,但是你要是想要实现,你点击“线上订单”或者“线下订单”就会打开你点击的那个窗口,你必须要用element模块,也就是:

<script>
   layui.use('element', function () {
       var $ = layui.jquery
       , element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
   });
</script>

还有要用上layui的css样式插件和js插件,
在这里插入图片描述

版权声明:本文为weixin_44546549原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44546549/article/details/90597084