layui怎么实现点击导航菜单在新窗口（_blank）打开链接-Layui教程-PHP中文网

在layui导航菜单中，直接为a标签添加target="_blank"即可实现新窗口打开，无需额外js；推荐同时添加rel="noopener noreferrer"保障安全。

layui怎么实现点击导航菜单在新窗口（_blank）打开链接

在 Layui 中，导航菜单默认使用 layui-nav-item 和 a 标签实现，要让点击菜单项在新窗口打开（即 target="_blank"），只需在对应链接标签中添加该属性即可，无需额外 JS 或修改 Layui 源码。

直接在 a 标签加 target="_blank"

这是最简单、推荐的方式。Layui 的导航菜单本质是标准 HTML 结构，支持原生属性：

✅ 注意：只要 href 是有效 URL（含协议如 https://，或相对路径如 /page.html），加上 target="_blank" 就会在新标签页打开。

配合 layui.nav() 初始化时保持属性有效

Layui 的导航模块（layui.nav()）仅负责样式高亮和下拉交互，**不会移除或覆盖你写的 target 属性**。所以即使你启用了导航切换监听，也不影响新窗口行为：

layui.use('element', function(){
  var element = layui.element;
  // 导航切换监听（可选）
  element.on('nav(navFilter)', function(elem){
    console.log('点击了：', elem.text());
  });
});

? 提示：如果菜单项带下拉子菜单，target="_blank" 应加在有 href 的父级 <a></a> 上（不是 <dl></dl> 或 <dd></dd>）；子菜单链接同样各自添加该属性。

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

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

下载

避免安全警告：补充 rel="noopener noreferrer"

当使用 target="_blank" 时，现代浏览器建议同时加上 rel="noopener noreferrer"，防止新开页面通过 window.opener 访问原页面（存在安全与性能风险）：

rel="noopener"：禁止新页面访问 window.opener
rel="noreferrer"：不发送 Referer 头（可选，增强隐私）

完整写法示例：

<a href="https://example.com" target="_blank" rel="noopener noreferrer">安全外链</a>

动态生成菜单时的处理

若菜单数据来自 JS 数组或后端渲染，拼接 HTML 时记得带上 target 和 rel：

var menuItems = [
  {title: '官网', href: 'https://layui.dev', blank: true},
  {title: '后台', href: '/dashboard', blank: false}
];

var html = menuItems.map(item => {
  var attrs = item.blank 
    ? 'target="_blank" rel="noopener noreferrer"' 
    : '';
  return '

' + item.title + '

'; }).join('');

不复杂但容易忽略，关键是写对 HTML 属性，Layui 完全兼容。