layui如何添加标签页

百变鹏仔 1个月前 (11-15) #layui

文章标签标签

如何使用 layui 添加标签页：导入 layui 脚本。创建标签页容器。使用 layui.tab.add 函数添加标签页，包括标题和内容。通过点击标题或使用 layui.tab.change 函数切换标签页。

如何使用 layui 添加标签页

layui 提供了一个标签页组件，用于在同一页面中创建多个可切换的选项卡。添加标签页非常简单，只需遵循以下步骤即可：

1. 导入 layui 脚本

在你的 HTML 页面中，首先导入 layui 脚本：

<script src="layui/layui.js"></script>

2. 创建标签页容器

接下来，创建一个标签页容器，标签页将被添加到其中。你可以使用 layui.tab 函数来创建容器：

<div id="tab"></div>

3. 添加标签页

使用 layui.tab.add 函数添加标签页。每个标签页都需要一个标题和一个内容区域：

layui.tab.add('tab', {  title: '标签页标题',  content: '标签页内容'});

4. 切换标签页

可以通过点击标签页标题或使用 layui.tab.change 函数来切换标签页：

layui.tab.change('tab', '标签页标题');

完整示例

以下示例展示了如何使用 layui 添加标签页：

  <script src="layui/layui.js"></script>  <div id="tab"></div>  <script>    layui.use(['jquery', 'element'], function() {      var $ = layui.jquery;      var element = layui.element;      // 添加标签页      element.tabAdd('tab', {        title: '标签页 1',        content: '标签页 1 内容'      });      element.tabAdd('tab', {        title: '标签页 2',        content: '标签页 2 内容'      });      // 切换标签页      $('#tab').on('click', 'li', function() {        var title = $(this).text();        element.tabChange('tab', title);      });    });  </script>

文章推荐

layui如何添加标签页

layui的分页怎么用

layui怎么设置checkbox勾选

layui怎么对弹出层显示数据

layui表格怎么清空

layui有什么主要功能