如何使用 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如何添加标签页的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
723
收藏
