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

为什么加了 lay-filter 就不跳转了
Layui 的 layui-nav 一旦带上 lay-filter 属性,框架就会自动给所有子项(<li> 或 @#@#@#@#@#@#@#@#@#@0,但点击后页面不动,控制台也无报错
lay-filter 立刻能跳转,一加上就失效nav.on() 监听,但没手动取 href 和跳转,误以为“监听到了就等于跳了”
nav.on() 回调里怎么安全跳转
保留 lay-filter 是必须的(比如你要同时做菜单高亮、权限控制或 iframe 切换),那跳转逻辑就得自己补全。关键点是:别依赖浏览器默认行为,要从 DOM 节点里显式读 href,再决定怎么跳。
实操建议:
- 用
$(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 加载要防白屏、新窗口要绕过拦截。这些细节没兜底,用户第一感觉就是“点不动”。











