URL 变化源于 href 值触发的浏览器默认行为,与 Layui 事件无关;应将 href 改为 javascript:void(0) 或改用 button 标签,并在 JS 中避免操作 location。

点击 Layui 导航栏后 URL 出现 #xxx 或跳到页面顶部,本质不是 Layui 自动加的,而是你用了 href="#" 或 href="#id" 这类锚点链接。浏览器原生行为会触发 hash 变更和滚动,Layui 的 nav.on('click()') 回调里 return false 或 e.preventDefault() 完全无效——因为那是自定义事件,不接管 DOM 默认行为。
把 href 改成 javascript:void(0)
这是最直接、兼容性最好的做法。既不会触发跳转,也不会改变 URL,还不滚屏:
- 写法示例:
@#@#@#@#@#@#@#@#@#@0 - 避免用
href="#":它会让页面滚回顶部,且 URL 加上# - 也别用
href="#someId":即使没对应元素,hash 依然会写入地址栏
在 click 回调里只执行 JS,不碰 location
Layui nav 的跳转逻辑完全由你控制。只要回调里不写 window.location.href 或 window.open(),就不会跳页或改 URL:
- 正确示范(仅做业务):
layui.nav.on('click(head)', function(data){ layer.msg('切换到 ' + data.elem.innerText); }); - 错误示范(隐式跳转):
if($(data.elem).attr('href')){ window.location.href = href; }—— 即使 href 是#,也会导致 URL 变 - 如需滚动到某区域,用
document.querySelector('#xxx').scrollIntoView({ behavior: 'smooth' }),不改 URL
兼顾可访问性和语义化(进阶建议)
如果对无障碍有要求,a[href="javascript:void(0)"] 不是最佳语义。更推荐:
- 改用
<button type="button" class="layui-nav-item">首页</button>,无 href 就天然无跳转风险 - 配合
role="menuitem"和键盘导航支持(如Enter/Space触发) - 若必须用链接语义(比如 SEO 或历史习惯),至少确保 href 指向真实资源路径,而非空锚点
核心就一条:URL 改变源于 href 值和浏览器默认行为,跟 Layui 事件绑定无关。控制好 HTML 的 href,再管住 JS 里不主动赋值 location,锚点 URL 就不会乱跑。











