如何獲得激活的標簽？Bootstrap5 -有解無憂

根據他們的網站

，在使用bootstrap 5時，我一直無法獲得激活的標簽。

我只是得到了第一個按鈕的ID，而不是激活的標簽，其他的都沒有。

。

var tabEl = document. querySelector('button[data-bs-toggle="tab"] ')
tabEl.addEventListener(' shown.bs.tab', function (event) {
  alert(event.target.id) //新激活的標簽。
  //event.relatedTarget // previous active tab。
})

< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="styleheet"> 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"/span>> </script>>


< ul class="nav導航標簽" id="myTab" role="tablist"> 
  < li class="nav-item" role="presentation"> 
    < button class="nav-link active"  id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab""tab" aria-controls="home" aria-selected="true"> 首頁</按鈕>
  </li>/span>
  < li class="nav-item" role="presentation"> 
    < button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile string">"#profile" type="button" role="tab" aria-controls="profile"/span> aria-selected="false"/span>> Profile</button>。
  </li>/span>
  < li class="nav-item" role="presentation"> 
    < button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" data-b-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false"> 聯系</按鈕>
  </li>/span>
</ul>/span>
< div class="tab-content" id="myTabContent">/span>
  < div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> . ...</div> 
  < div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="file-tab"> . ...</div> 
  < div class="tab-pane fade"/span> id="contact" role="tabpanel" aria-labelledby=" contact-tab"> . ...</div> 
</div>

我需要標簽的ID，一旦它的相關按鈕被點擊。

uj5u.com熱心網友回復：

你的腳本只找到第一個button[data-bs-toggle="tab"]你需要使用document.querySelectorAll('button[data-bs-toggle="tab"]')然后回圈瀏覽NodeList。

編輯

選擇實際活動的標簽窗格元素需要更多的作業。event.target和event.relatedTarget是標簽按鈕，其data-bs-target屬性值是相關標簽窗格的選擇器。

。

var tabEl = document. querySelectorAll('button[data-bs-toggle="tab"] ')
//console.log(tabEl)。
for (i = 0; i < tabEl.length; i  ) {
  tabEl[i].addEventListener(' shown.bs.tab'，function(event) {
    const activated_pane = document.querySelector（event。 target.getAttribute('data-bs-target')
    const deactivated_pane = document.querySelector（event. relatedTarget.getAttribute('data-bs-target')

    console.log(activated_pane.id)
    //控制臺.log(deactivated_pane.id)

    //做一些事情。
    activated_pane.append(' hello '/span>   activated_pane.id)

  })
}

< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="styleheet"> 

< ul class="nav導航標簽" id="myTab" role="tablist"> 
  < li class="nav-item" role="presentation"> 
    < button class="nav-link active"  id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab""tab" aria-controls="home" aria-selected="true"> 首頁</按鈕>
  </li>/span>
  < li class="nav-item" role="presentation"> 
    < button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile string">"#profile" type="button" role="tab" aria-controls="profile"/span> aria-selected="false"/span>> Profile</button>。
  </li>/span>
  < li class="nav-item" role="presentation"> 
    < button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" data-b-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false"> 聯系</按鈕>
  </li>/span>
</ul>/span>
< div class="tab-content" id="myTabContent">/span>
  < div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> . ...</div> 
  < div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="file-tab"> . ...</div> 
  < div class="tab-pane fade"/span> id="contact" role="tabpanel" aria-labelledby=" contact-tab"> . ...</div> 
</div>/span>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"/span>> </script>

這里是小提琴。

uj5u.com熱心網友回復：

你正在使用querySelector，它只選擇第一個元素。使用querySelectorAll，它可以選擇所有的標簽。

。

var tabEl = document. querySelectorAll('button[data-bs-toggle="tab"] ')
tabEl.forEach（function（el）{
el.addEventListener(' shown.bs.tab', function (event) {
  alert(event.target.id) //新激活的標簽。
  // event.relatedTarget // previous active tab.
})
})

< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="styleheet"> 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"/span>> </script>>


< ul class="nav導航標簽" id="myTab" role="tablist"> 
  < li class="nav-item" role="presentation"> 
    < button class="nav-link active"  id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab""tab" aria-controls="home" aria-selected="true"> 首頁</按鈕>
  </li>/span>
  < li class="nav-item" role="presentation"> 
    < button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile string">"#profile" type="button" role="tab" aria-controls="profile"/span> aria-selected="false"/span>> Profile</button>。
  </li>/span>
  < li class="nav-item" role="presentation"> 
    < button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" data-b-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false"> 聯系</按鈕>
  </li>/span>
</ul>/span>
< div class="tab-content" id="myTabContent">/span>
  < div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> . ...</div> 
  < div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="file-tab"> . ...</div> 
  < div class="tab-pane fade"/span> id="contact" role="tabpanel" aria-labelledby=" contact-tab"> . ...</div> 
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/326417.html

標籤：

上一篇：如何將多個資料框加在一起

下一篇：無法將dockerizedspringboot應用程式連接到非dockerizedpostgres資料庫（本地主機）