如何防止“_blank”选项卡中的菜单项重复激活？

Question

我使用带有下拉按钮的垂直侧面导航菜单。由于我希望用户能够同时处理多个菜单/子菜单选项，因此我设置了每次按下按钮时使用 target="_blank" 在其自己的选项卡中生成相应的屏幕...此外，为了为了统一和高效，我希望避免每次激活其他菜单选项时都必须返回主屏幕，这就是为什么我计划在每个启动的选项卡的代码中重复显示相同的主屏幕菜单。我的问题：我还想防止重新启动已在其自己的选项卡中激活的菜单/子菜单功能。在以原始形式显示菜单时，这可能需要禁用已激活的菜单/子菜单项。

作为这项技能的新手，我不知道如何将此功能构建到代码中（见附件）。显然，我需要帮助，希望我的要求不要太多。

谢谢你， 埃坦

下面是我当前的 html 和 JS 代码块：

  <button class="dropdown-btn">Intake (3)
      <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
      <a href="send.html"     target="_blank">Send</a>
      <a href="uploaded.html" target="_blank" >Uploaded</a>
      <a href="others.html"   target="_blank">Others</a>
  </div>

  <a href="pending.html" target="_blank">Pending</a> 
  <a href="filed.html"   target="_blank">Filed</a>
  <a href="view.html"    target="_blank">View</a>
  <a href="search.html"  target="_blank">Search</a>

  <button class="dropdown-btn">WorkFlow (2)
      <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
      <a href="wf-task1.html" target="_blank">WF-task1</a>
      <a href="wf-task2.html" target="_blank">WF-task2</a>
  </div>

  <button class="dropdown-btn">Admin (3) 
      <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
      <a href="admin1.html" target="_blank">Admin1</a>
      <a href="admin2.html" target="_blank">Admin2</a>
      <a href="admin3.html" target="_blank">Admin3</a>
  </div> 

var dropdown = document.getElementsByClassName("dropdown-btn"); 变量我； 对于 (i = 0; i

Answer 1

如果您的页面打开了新的“_blank”选项卡，您可以跟踪它。然后，当用户再次单击主页中的链接时，检查选项卡是否已关闭。如果它被关闭，则丢弃；如果未关闭，请打开。不过，为此，您必须拦截链接上的点击。

基本上，您的 HTML 看起来像这样：

<a href="send.html"     target="_blank" onclick="checkIfOpened(this)">Send</a>
<a href="uploaded.html" target="_blank" onclick="checkIfOpened(this)" >Uploaded</a>
<a href="others.html"   target="_blank" onclick="checkIfOpened(this)">Others</a>

在 javascript 中，你可以：

var opened_tabs = [];
function checkIfOpened(elem) {
    window.event.preventDefault();
    if (opened_tabs[elem.href] && !opened_tabs[elem.href].closed) {
        alert('Tab already opened.');
    } else {
        opened_tabs[elem.href] = window.open(elem.href,"_blank");
    }
}