Início / coding / Perguntas / 78786598
Accepted
DJDuque
Asked: 2024-07-24 14:03:36 +0800 CST

Adicione um botão Fechar às guias

  • 772

Estou aprendendo bootstrap e quero ter um nome xao lado de cada guia para fechá-la:

<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>

Consegui hackear algo para aninhar outro botão dentro do meu primeiro botão e então:

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

mas descobri on-line que não é válido aninhar um botão dentro de outro botão

Existe uma alternativa melhor que as pessoas podem sugerir?

html

1 respostas

  1. Best Answer

    Você não precisa aninhar botões. Você não precisa usar botões para suas guias e pode apenas usar um arquivo div. Por motivos de acessibilidade, você deve usá role="button"-lo.

    Em vez de codificar os botões, você poderia simplesmente usar JS para criar os botões de fechamento em cada guia.

    Seu script deve remover não apenas a guia em si, mas também o painel de guias conectado:

    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

relate perguntas