Layui导航跳转失效是因lay-filter触发默认事件拦截，解决方法：①删lay-filter交还浏览器；②保留lay-filter则需在nav.on()中手动获取href并window.location.href跳转。

点击 layui-nav-item 没反应，根本没触发跳转

这是最常见的情况：html 里写了 <a href="xxx">，但点击后页面不动，控制台也没报错。本质不是 layui “禁用了跳转”，而是你写的链接被 layui 的默认事件拦截了——它给每个 layui-nav-item 里的 <a> 绑定了 click 事件并执行了 return false，目的是为了支持纯 js 导航切换（比如配合 layui.nav.on() 做 tab 切换）。只要没手动解绑或绕过，原生跳转就被按住了。

实操建议：

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

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

下载

• 如果只是想做普通页面跳转，直接删掉 layui-nav 的 lay-filter 属性——没有这个属性，Layui 就不会给导航项绑定事件，<a href> 自然生效
• 如果必须保留 lay-filter（比如同时要用到 nav.on() 监听），那就别用 <a> 标签，改用 <span> 或 <div>，然后在 nav.on() 回调里手动 window.location.href = 'xxx'
• 检查是否误把 href 写成了 javascript:void(0) 或空字符串 href=""，这两种写法浏览器默认不跳转，且 Layui 不会帮你补逻辑

nav.on('click(...) 触发了，但 href 还是没走

说明你已经加了 lay-filter，也监听到了点击，但没主动处理跳转。Layui 的 nav.on() 只负责通知你“用户点了哪一项”，它不管你是刷新页面、开新页，还是加载异步内容——这些全得你自己写。

实操建议：

• 在回调函数里拿到 elem（即被点击的 DOM 节点），用 elem.attr('href') 取出原始链接，再执行跳转：

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

• 注意判断 href 是否为空或无效值，否则可能跳到当前页顶部（#）或执行无意义 JS
• 如果想新开页，用 window.open(href, '_blank')，但部分浏览器会拦截，不如直接设 <a target="_blank"> 并去掉 lay-filter

用了 target="_blank" 却被阻止打开新窗口

这不是 Layui 的锅，而是现代浏览器对 window.open() 的限制：只有在用户主动触发的同步事件（比如 click 回调内）中调用才放行；如果跳转逻辑包在 setTimeout、异步请求回调或事件委托链深处，大概率被拦截。

实操建议：

• 确保 window.open() 直接写在 nav.on() 的回调第一层，不要嵌套异步操作
• 更稳妥的方式是放弃 JS 控制，把 target="_blank" 写死在 HTML 的 <a> 标签上，并移除 lay-filter —— 浏览器认原生属性，不拦截
• 如果必须保留 lay-filter 又要新窗口，可在 click 回调里先 var w = window.open('about:blank');，再 w.location.href = href;，但兼容性略差

Layui 导航栏的跳转逻辑其实就两条路：要么彻底交还给浏览器（去掉 lay-filter），要么自己全权接管（监听 + 手动跳转）。中间状态——比如留着 lay-filter 却指望 <a> 自己动——最容易卡住，而且错误不报，只静默失效。