如何修改JavaScript代码让导航文本链接在新窗口打开？

我的网站滚动式头部导航栏包含文本与图标链接，目前图标链接点击可在新窗口打开，但文本链接无法实现该效果。已定位到负责链接行为的核心代码与配置代码如下，寻求修改方案使文本链接也能在新窗口打开。

核心代码（原代码） #

// Create the menu options
var menuOptions = $('<div>', { id : 'ctd-menu-options' });
menuOptions.css({
position : 'relative', zIndex : 100,
padding : '30px 10px 30px 0', textAlign: 'right'
});
showIntro ? menuOptions.css(config.bottomMenuÖptionsStyle) : menuOptions.css(config.topMenuOptionsStyle);
var menuOptionsHtml = '';
config-menuOptions (''] = "";
Object.keys(config-menuOptions).reverse(). forEach((key, i) => {
var target = "window.location.href=\'"+config-menuOptions [key]+"\'";
if (key-substring(1,4) = 'svg' || key-substring (1,4) == 'SVG') {
target = "window.open(\'"+config.menuOptions[key]+"\', \'_blank\')";
menuOptionsHtml = menuOptionsHtml+'<div class="ctd-menu-option" onclick="'+target+'" style="cursor:pointer; float:right; margin-left:30px; margin-bottom:18px;">'+key+'</div>';
}) :
menuOptions.html(menuOptionsHtml);

配置代码 #

menuOptions: {
"Home"："",
'<path class="newWindow">Résumé</path>': 'https://www.charlesthedesigner.com/resume/Charles-Kent-Resume_2026_Final.pdf',
'Portfolios' : '/#portfolios',
'Contact' : '/contact',
'<svg style="width: 26px; height: 26px;" fill="currentColor" viewBox="0 0 20 20" xmlns="http://ww.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0
011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>': 'https://www.charlesthedesigner.com/resume/Charles-Kent-Resume_2026_Final.pdf',
'<svg style="width: 26px; height: 26px;" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6M14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894A1 1 0 0018 13V7a1 1 0 00-1.447-.894"></path></svg>': 'https://www.youtube.com/@CharlesTheCreator',
'<svg style="width: 26px; height: 31px;" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path class="newWindow" stroke-width="0" fill-rule="evenodd" d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0
.633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146m4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.42" clip
rule="evenodd"></path></svg>': 'https://www.linkedin.com/in/charlesthedesigner/'

导航栏效果展示 #

修改方案 #

方案一：所有有效链接都在新窗口打开 #

直接修改核心代码，默认所有非空链接都用新窗口打开，空白链接（如Home）保持当前页面跳转：

// Create the menu options
var menuOptions = $('<div>', { id : 'ctd-menu-options' });
menuOptions.css({
  position : 'relative', zIndex : 100,
  padding : '30px 10px 30px 0', textAlign: 'right'
});
showIntro ? menuOptions.css(config.bottomMenuOptionsStyle) : menuOptions.css(config.topMenuOptionsStyle);
var menuOptionsHtml = '';

// 遍历配置项生成菜单
Object.keys(config.menuOptions).reverse().forEach((key, i) => {
  const linkUrl = config.menuOptions[key];
  // 默认用新窗口打开非空链接
  let target = `window.open('${linkUrl}', '_blank')`;
  // 空白链接（如Home）跳转当前页面
  if (!linkUrl) {
    target = `window.location.href='${linkUrl}'`;
  }
  menuOptionsHtml += `<div class="ctd-menu-option" onclick="${target}" style="cursor:pointer; float:right; margin-left:30px; margin-bottom:18px;">${key}</div>`;
});

menuOptions.html(menuOptionsHtml);

方案二：仅外部链接/带指定标识的链接新窗口打开 #

如果需要区分内部链接（如/#portfolios、/contact）和外部链接，或者指定某些文本链接（如配置中带newWindow类的Résumé）新窗口打开，用以下代码：

// Create the menu options
var menuOptions = $('<div>', { id : 'ctd-menu-options' });
menuOptions.css({
  position : 'relative', zIndex : 100,
  padding : '30px 10px 30px 0', textAlign: 'right'
});
showIntro ? menuOptions.css(config.bottomMenuOptionsStyle) : menuOptions.css(config.topMenuOptionsStyle);
var menuOptionsHtml = '';

// 遍历配置项生成菜单
Object.keys(config.menuOptions).reverse().forEach((key, i) => {
  const linkUrl = config.menuOptions[key];
  // 默认当前页面跳转
  let target = `window.location.href='${linkUrl}'`;
  
  // 判断条件：外部链接（http/https开头） 或 包含newWindow类的元素
  const isExternal = linkUrl.startsWith('http');
  const hasNewWindowFlag = key.includes('newWindow');
  
  if (isExternal || hasNewWindowFlag) {
    target = `window.open('${linkUrl}', '_blank')`;
  }
  
  menuOptionsHtml += `<div class="ctd-menu-option" onclick="${target}" style="cursor:pointer; float:right; margin-left:30px; margin-bottom:18px;">${key}</div>`;
});

menuOptions.html(menuOptionsHtml);

关键修改说明 #

1. 修正了原代码中的语法错误（如config-menuOptions应为config.menuOptions，key-substring应为key.substring，以及循环结构的语法问题）
2. 移除了原代码中仅针对svg图标的判断逻辑，改为更通用的规则
3. 方案一适合需要所有链接都新窗口打开的场景；方案二更灵活，可按需区分链接类型

内容的提问来源于stack exchange，提问作者Charles K.