Layui Pear-Admin不同组件间点击新建选项卡

꧁༺蓝冰༻꧂

已于 2023-06-18 13:34:24 修改

阅读量1k

点赞数 1

分类专栏：前端文章标签： layui javascript 前端

于 2022-06-27 17:56:46 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46664972/article/details/125488575

版权

前端专栏收录该内容

10 篇文章

订阅专栏

这篇博客介绍了如何利用JavaScript实现动态创建和管理选项卡的功能。通过在HTML中添加data-id、data-title和data-url属性，然后监听点击事件，可以实现新选项卡的打开。提供的代码示例展示了如何通过layui库来实现这一功能，包括添加、关闭选项卡等操作。此外，还给出了直接新建选项卡的简短脚本代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在要点击的标签加上属性
```
<div data-id="2114" data-title="配置管理" data-url="/system/">
```
data-id：新建选项卡的id，如果设置跟侧边导航一致才有联动效果
data-title：新建选项卡名称
data-url：新建选项卡页面的请求地址

写监听点击脚本js

/*监听点击打开新tab页*/
$("body").on("click", "[data-url]", function () {
    parent.layui.tab.addTabOnlyByElem("content", {
        id: $(this).attr("data-id"),
        title: $(this).attr("data-title"),
        url: $(this).attr("data-url"),
        close: true
    })
})

点击就可以新建选项卡页面了
在这里插入图片描述

拓展：直接新建选项卡的脚本代码

parent.layui.admin.addTab(2114,"配置管理","/system/");