本文档详细介绍了如何使用Layui前端框架来创建和管理选项卡，包括基本选项卡的创建、删除和新增功能，以及如何改变选项卡的风格，如简约和卡片风格。
Layui-选项卡
文献种类：专题技术文献；
开发工具与关键技术： VS、JS
作者：方建恒 ；年级：20级 ；撰写时间： 2022 年 3 月 8日
在一些网页的制作中，往往会用到选项卡切换的功能，
今天我们就来了解一下如何运用Layui的选项卡组件。
首先我们要把layui的js和css引入，如图：
接下来是HTML部分：
我们用ul标签把选项卡的头部包裹起来，
再用div标签把选项卡的内容包裹起来，如图：
接下来是script部分：
因为tab组件依赖于element组件，所以我们直接加载element组件就可以了。
具体代码如下图所示：
这样一个简单的选项卡就完成了。
我们还可以在基础的选项卡上添加一些小功能，
- 删除选项卡：
在类名为layui-tab的div标签里加上lay-allowClose=“true”，
这样选项
最低0.47元/天 解锁文章
2750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
