layui导航栏怎么点击不跳转

老芳小哥_1458

老芳小哥_1458

2026-09-09

298人浏览

原创

加了 lay-filter 就不跳转是因为 layui 会自动阻止默认跳转行为以支持自定义导航逻辑;需在 nav.on() 回调中手动获取 href 并执行 window.location.href 跳转。

layui导航栏怎么点击不跳转

为什么加了 lay-filter 就不跳转了

Layui 的 layui-nav 一旦带上 lay-filter 属性,框架就会自动给所有子项(<li>@#@#@#@#@#@#@#@#@#@0,但点击后页面不动,控制台也无报错

  • 删掉 lay-filter 立刻能跳转,一加上就失效
  • 用了 nav.on() 监听,但没手动取 href 和跳转,误以为“监听到了就等于跳了”
  • nav.on() 回调里怎么安全跳转

    保留 lay-filter 是必须的(比如你要同时做菜单高亮、权限控制或 iframe 切换),那跳转逻辑就得自己补全。关键点是:别依赖浏览器默认行为,要从 DOM 节点里显式读 href,再决定怎么跳。

    实操建议:

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

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

    下载
    • $(data.elem).attr('href') 获取原始链接,不是 data.url(这个字段不存在)
    • 务必判断值有效性:if (href && href !== '#' && href !== 'javascript:void(0)')
    • 跳当前页用 window.location.href = href;开新页用 window.open(href, '_blank'),但注意浏览器可能拦截(仅限用户主动 click 同步调用才放行)
    • 如果 href 是相对路径(如 /admin/log),确保它能被当前域名正确解析

    示例代码:

    layui.use(['nav', 'jquery'], function(){
      var $ = layui.jquery;
      layui.nav.on('click(head)', function(data){
        var href = $(data.elem).attr('href');
        if(href && href !== '#' && href !== 'javascript:void(0)'){
          window.location.href = href;
        }
      });
    });

    想局部刷新(不跳转)只换 iframe src 怎么写

    后台系统常用模式:左侧菜单点击,右侧 <iframe></iframe> 换内容,整个页面不刷新。这时候你根本不需要跳转,而是改 src —— 但得确保事件能捕获到,且不被 Layui 默认拦截。

    实操建议:

    • 菜单项用 <a href="/admin/user"></a> 写法,但必须加 lay-unselect(禁用 Layui 自带选中逻辑)或干脆去掉 lay-filter
    • 用 jQuery 委托监听更可靠:$(document).on('click', '.layui-nav-item a', function(e){ e.preventDefault(); $('#mainIframe').attr('src', this.href); })
    • 避免直接给 <a></a>onclick="...",容易和 Layui 事件冲突
    • <iframe></iframe> 必须有固定 id(如 id="mainIframe"),且初始 src 不为空(否则首次加载可能失败)

    href 写错导致“看起来没跳转”的隐形坑

    很多“不跳转”问题其实和 Layui 无关,是链接本身无效。这类问题调试时容易忽略,因为控制台不报错,点击也“有反应”(比如菜单高亮了),但页面就是不动。

    高频错误:

    • href=""href="#":浏览器默认滚动到顶部,无跳转
    • href="javascript:;"href="javascript:void(0)":JS 执行空操作,不触发导航
    • 路径写错,比如 href="user/list" 缺少开头斜杠,实际请求变成 http://host/current/user/list(404)
    • 后端路由未配置,返回 404 页面但没提示,用户以为“卡住了”

    验证方法:右键菜单项 → “在新标签页中打开链接”,看是否真能访问。如果打不开,问题一定出在链接值或服务端,和 Layui 无关。

    真正难处理的从来不是“怎么跳”,而是“什么时候不该跳”——比如 tab 切换要保持当前页状态、iframe 加载要防白屏、新窗口要绕过拦截。这些细节没兜底,用户第一感觉就是“点不动”。

    相关文章

    PHP速学视频免费教程(入门到精通)
    PHP速学视频免费教程(入门到精通)

    PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

    下载

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    python是前端还是后端
    python是前端还是后端

    Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

    2023.08.11

    2083

    5

    前端如何实现即时通讯
    前端如何实现即时通讯

    实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

    2023.10.09

    4443

    6

    前端和后端的区别
    前端和后端的区别

    前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

    2024.03.19

    5590

    13

    php和前端的关联介绍
    php和前端的关联介绍

    php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

    2024.03.22

    5018

    10

    前端外包工作内容有哪些
    前端外包工作内容有哪些

    前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

    2024.05.22

    703

    5

    Buffalo框架数据库开发全教程
    Buffalo框架数据库开发全教程

    本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

    2026.09.23

    20

    15

    Buffalo框架路由与请求处理实操指南
    Buffalo框架路由与请求处理实操指南

    本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

    2026.09.23

    0

    15

    Buffalo框架零基础入门教程
    Buffalo框架零基础入门教程

    本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

    2026.09.23

    0

    15

    Conan创建软件包配方指南
    Conan创建软件包配方指南

    本专题介绍通过conanfile.py创建软件包的方法,讲解包名、版本、依赖和构建设置等基础信息,以及source、build、package、package_info等常用方法的作用及编写思路。

    2026.09.22

    0

    12

    热门下载

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

    精品课程

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

    共87课时 | 12.4万人学习

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

    共89课时 | 10.6万人学习

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

    共5课时 | 1.6万人学习