如何避免在_blank标签页中重复激活侧边导航菜单项？

核心思路 #

利用浏览器的localStorage记录已打开页面的URL，每个标签页加载时读取记录，将对应菜单项设为禁用状态；同时监听菜单项点击事件，实时更新记录。

具体实现步骤 #

1. 给菜单项添加标识

给每个菜单/子菜单的链接加上与href一致的data-url属性，方便后续匹配：

<!-- 示例垂直侧边导航结构 -->
<nav class="sidebar">
  <ul>
    <li>
      <a href="/home" target="_blank" data-url="/home">首页</a>
    </li>
    <li class="dropdown">
      <button class="dropdown-btn">功能模块</button>
      <ul class="dropdown-content">
        <li><a href="/module1" target="_blank" data-url="/module1">模块1</a></li>
        <li><a href="/module2" target="_blank" data-url="/module2">模块2</a></li>
      </ul>
    </li>
  </ul>
</nav>

2. 编写JavaScript逻辑

// 页面加载时初始化禁用状态
document.addEventListener('DOMContentLoaded', function() {
  // 从localStorage获取已打开URL列表，无记录则初始化空数组
  let openedUrls = JSON.parse(localStorage.getItem('openedPages')) || [];
  
  // 遍历所有菜单项，匹配已打开URL并禁用
  document.querySelectorAll('.sidebar a[data-url]').forEach(link => {
    const url = link.getAttribute('data-url');
    if (openedUrls.includes(url)) {
      link.style.pointerEvents = 'none'; // 阻止点击交互
      link.classList.add('disabled-link'); // 添加禁用样式类
    }
  });

  // 监听菜单项点击，更新已打开URL列表
  document.querySelectorAll('.sidebar a[data-url]').forEach(link => {
    link.addEventListener('click', function() {
      const url = this.getAttribute('data-url');
      let openedUrls = JSON.parse(localStorage.getItem('openedPages')) || [];
      if (!openedUrls.includes(url)) {
        openedUrls.push(url);
        localStorage.setItem('openedPages', JSON.stringify(openedUrls));
      }
    });
  });
});

3. 添加禁用状态的CSS样式

保留原有菜单样式，仅添加禁用状态的视觉提示：

.disabled-link {
  color: #999; /* 灰色标识禁用状态 */
  cursor: not-allowed; /* 鼠标悬停显示禁止图标 */
  /* 可根据原有样式调整，比如保留背景色，仅修改文字透明度 */
}

4. 标签页关闭时移除记录（可选）

若需要在标签页关闭时从记录中移除对应URL，可添加以下代码（浏览器关闭事件存在兼容性，仅作参考）：

window.addEventListener('beforeunload', function() {
  const currentUrl = window.location.pathname;
  let openedUrls = JSON.parse(localStorage.getItem('openedPages')) || [];
  // 过滤掉当前页面URL
  openedUrls = openedUrls.filter(url => url !== currentUrl);
  localStorage.setItem('openedPages', JSON.stringify(openedUrls));
});

注意事项 #

• localStorage为同源共享，需确保所有页面在同一域名下
• 若为单页应用，需调整URL判断逻辑，改用路由路径进行匹配
• 测试时可通过浏览器开发者工具清除localStorage缓存，避免影响测试结果

内容的提问来源于stack exchange，提问作者Eitan Dub