layui的tab选项卡

2022年6月21日 238次阅读 来源: 慧小慧

Tab切换卡

开发工具与关键技术：MVC
撰写时间：2019.05.27

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

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

而第二个div标签里面装的肯定就是，“线上订单”下方的内容和“线下订单”下方的内容：
《layui的tab选项卡》
下面就是重点了，以上内容只能说明你把页面结构和页面内容给打好了，但是你要是想要实现，你点击“线上订单”或者“线下订单”就会打开你点击的那个窗口，你必须要用element模块，也就是：

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

还有要用上layui的css样式插件和js插件，
《layui的tab选项卡》

    原文作者：慧小慧
    原文地址: https://blog.csdn.net/weixin_44546549/article/details/90597084
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞