0;需限定父容器为.layui-tab-title,避免误判;不建议依赖.layui-this、data(‘index’)或遍历比对。" /> 0;需限定父容器为.layui-tab-title,避免误判;不建议依赖.layui-this、data(‘index’)或遍历比对。">

layui Tab选项卡怎么判断某个ID的Tab页是否已经存在

酷枫姑娘_2395

酷枫姑娘_2395

2026-10-08

497人浏览

原创

最直接可靠的方式是查询 dom 中对应标题项是否存在,即用 jquery 查找 li[lay-id='xxx'] 是否存在,如 $("li[lay-id='usermanage']").length > 0;需限定父容器为 .layui-tab-title,避免误判;不建议依赖 .layui-this、data('index') 或遍历比对。

layui tab选项卡怎么判断某个id的tab页是否已经存在

判断某个 lay-id 的 Tab 页是否已存在,最直接可靠的方式是查询 DOM 中对应标题项是否存在。

用 jQuery 查找 lay-id 对应的 tab 标题项

Tab 标题是 `

  • ` 元素,其 `lay-id` 属性即为业务标识。只要该 `
  • ` 存在,就说明这个 Tab 已被添加:
    • 写法示例:$("li[lay-id='userManage']").length > 0
    • 返回 true 表示已存在;false 表示未添加过
    • 注意:必须确保选择器作用于正确的 tab 容器,如加父级限制 $(".layui-tab-title li[lay-id='xxx']")

    配合 element.tabAdd 做“存在则切换,不存在则新增”

    这是后台常用逻辑,避免重复打开同一页面:

    深蓝色网站后台管理系统layui框架模板-AdminPro
    深蓝色网站后台管理系统layui框架模板-AdminPro

    一款深蓝色网站后台管理系统layui框架模板

    下载
    • 先查:if ($("li[lay-id='orderList']").length) { layui.element.tabChange('tabs', 'orderList'); }
    • 再添:else { layui.element.tabAdd('tabs', { id: 'orderList', title: '订单列表', content: '<iframe src="order.html"></iframe>' }); }
    • 关键点:id 字段必须与 lay-id 一致,且推荐用字符串字面量(如 'orderList'),避免变量污染或拼写错误

    不建议依赖 .layui-this 或渲染顺序判断

    仅查「是否打开过」,不要用以下方式:

    • $('.layui-this').attr('lay-id') —— 只能拿到当前激活项,无法反映其他已打开但未激活的 tab
    • $(...).data('index') —— 是 DOM 位置索引,删 tab 后会错乱,不能代表业务 ID
    • 遍历所有 tab 手动比对 —— 效率低,且容易漏掉动态插入后未重绘的情况

    本质上,Layui 不维护 tab 的“已存在”状态表,所以 DOM 查询是最轻量、最稳妥的判断依据。只要 tab 被正确 add 过,其标题项就会留在 `.layui-tab-title` 下,查它就行。

  • 相关专题

    更多
    ajax教程
    ajax教程

    php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

    2023.06.14

    2620

    4

    ajax中文乱码解决方法
    ajax中文乱码解决方法

    ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

    2023.08.31

    340

    5

    ajax传递中文乱码怎么办
    ajax传递中文乱码怎么办

    ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    2023.11.15

    2453

    5

    ajax网站有哪些
    ajax网站有哪些

    使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    2024.09.24

    1141

    6

    FrankenPHP集成Laravel详细教程
    FrankenPHP集成Laravel详细教程

    本专题提供FrankenPHP集成Laravel的详细配置指南,全面解析运行原理、开发环境搭建、Caddyfile配置、Octane工作模式、数据库连接、队列任务、定时任务和生产环境优化,解决部署过程中常见的报错与兼容性问题。

    2026.10.08

    0

    20

    LLVM自定义Pass怎么写
    LLVM自定义Pass怎么写

    本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

    2026.09.30

    120

    10

    LLVM RISC-V参数配置教程
    LLVM RISC-V参数配置教程

    本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

    2026.09.30

    100

    14

    LLVM IR中间表示入门指南
    LLVM IR中间表示入门指南

    本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

    2026.09.30

    80

    12

    PDF转图片方法
    PDF转图片方法

    需要把 PDF 页面用于上传、预览、分享或图片归档时,PDF 转图片方法专题整理 JPG/PNG 格式选择、逐页导出、清晰度设置、批量下载和结果检查等流程,帮助用户稳定完成 PDF 图片化处理。

    2026.09.30

    80

    26

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    ThinkPHP配置开发与CMS后台实战
    ThinkPHP配置开发与CMS后台实战

    共87课时 | 12.8万人学习

    第二十三期_综合实战
    第二十三期_综合实战

    共89课时 | 11万人学习

    Layui 快速入门精讲
    Layui 快速入门精讲

    共5课时 | 1.6万人学习