主页 / coding / 问题 / 78786598
Accepted
DJDuque
Asked: 2024-07-24 14:03:36 +0800 CST

向标签页添加关闭按钮

  • 772

我正在学习引导程序，我想x在每个选项卡名称旁边有一个按钮来关闭它：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" id="tab-li-1">
    <button
      class="nav-link active"
      data-bs-toggle="tab"
      data-bs-target="#tab-1"
      type="button"
    >
      First
      <button
        class="btn-close"
        onclick="
          document.getElementById(`tab-li-1`).remove();
          document.getElementById(`tab-1`).remove();
        "
       ></button>
    </button>
  </li>
  <li class="nav-item" id="tab-li-2">
    <button
      class="nav-link"
      data-bs-toggle="tab"
      data-bs-target="#tab-2"
      type="button"
     >
     Second
       <button
        class="btn-close"
        onclick="
          document.getElementById(`tab-li-2`).remove();
          document.getElementById(`tab-2`).remove();
        "
       ></button>
     </button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="tab-1" tabindex="0">Some text here for `First`</div>
  <div class="tab-pane fade" id="tab-2" tabindex="0">More text here for `Second`</div>
</div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

我可以对在第一个按钮内嵌套另一个按钮进行一些修改，然后：

document.getElementById(tabId).remove();
document.getElementById(tabContentId).remove();

但是我在网上发现将一个按钮嵌套在另一个按钮中是无效的

大家能建议一下有没有更好的替代方案吗？

html

1 个回答

  1. Best Answer

    您不需要嵌套按钮。您不必为选项卡使用按钮，只需使用普通的按钮即可div。出于可访问性原因，您应该使用role="button"按钮。

    您可以简单地使用 JS 在每个选项卡上创建关闭按钮，而不必对按钮进行硬编码。

    您的脚本不仅应该删除选项卡本身，还应该删除连接的选项卡窗格：

    window.addEventListener('DOMContentLoaded', function() {
  const TABS = document.querySelectorAll('.nav-link');

  //adds clsoe button to all tabs
  TABS.forEach(tab => {
    let closeBtn = document.createElement('button');
    closeBtn.ariaLabel = 'Close Button';
    closeBtn.textContent = 'X';
    closeBtn.addEventListener('click', removeTab); 
    tab.appendChild(closeBtn);
  })
  
  //removes the tab and the tab-pane
  function removeTab() {
    let tabId = this.closest('.nav-link').dataset.bsTarget;
    let tabPaneElement = document.querySelector(tabId);
    let liElement = this.closest('li');
    tabPaneElement.remove();
    liElement.remove();
  }
})
    .nav-link {
  &:hover {
    cursor: pointer;
  }
  button {
    margin-left: 1em;
  }
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" id="tab-li-1">
    <div class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-1" role="button">First</div>
  </li>
  <li class="nav-item">
    <div class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-2" role="button">Second</div>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="tab-1" tabindex="0">Some text here for `First`</div>
  <div class="tab-pane fade" id="tab-2" tabindex="0">More text here for `Second`</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

    • 1

相关问题