Layui-选项卡

Layui-选项卡

文献种类：专题技术文献；
开发工具与关键技术： VS、JS
作者：方建恒 ；年级：20级 ；撰写时间： 2022 年 3 月 8日
在一些网页的制作中，往往会用到选项卡切换的功能，
今天我们就来了解一下如何运用Layui的选项卡组件。
首先我们要把layui的js和css引入，如图：

接下来是HTML部分：
我们用ul标签把选项卡的头部包裹起来，
再用div标签把选项卡的内容包裹起来，如图：

接下来是script部分：
因为tab组件依赖于element组件，所以我们直接加载element组件就可以了。
具体代码如下图所示：

这样一个简单的选项卡就完成了。
我们还可以在基础的选项卡上添加一些小功能，

1. 删除选项卡：
   在类名为layui-tab的div标签里加上lay-allowClose=“true”，
   这样选项卡就可以通过点击关闭按钮来删除选项卡了。
   页面效果如下：
   
2. 新增选项卡：
   首先我们要给类名为layui-tab的div标签里加上lay-filter=“demo”，
   然后创建一个button按钮，给它一个点击事件Add()，
   在点击事件Add()里用element组件里的一个方法element.tabAdd()，
   然后用title属性来设置选项卡的标题，
   用content属性来设置选项卡的内容，注：该属性支持传入html。
   用id: 属性来设置选项卡的lay-id。
   最后用element.render();方法对选项卡进行重载。
   这样一来当我们点击按钮时就会给我们的选项卡上添加一个新的选项卡。
   具体代码如图：
   
3. 选项卡风格：
   这个功能可以让你改变选项卡的风格。
   1） 简约风格：在类名为layui-tab的div标签里加上layui-tab-brief，
   这样就可以将选项卡切换为简约风格。效果如下图所示：
   

2）卡片风格：在类名为layui-tab的div标签里加上layui-tab-card，
这样就可以将选项卡切换为卡片风格。效果如下图所示：

以上就是layui中tab选项卡的一些简单的运用了。