我正在嘗試添加一個 Bootstrap 選項卡面板，如下所示：
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">First Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Second Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Third Panel</a>
</li>
</ul><!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="tabs-1" role="tabpanel">
<p>First Panel</p>
</div>
<div class="tab-pane" id="tabs-2" role="tabpanel">
<p>Second Panel</p>
</div>
<div class="tab-pane" id="tabs-3" role="tabpanel">
<p>Third Panel</p>
</div>
</div>
現在我需要向用戶提供鏈接以查看如下窗格：
https://sitename.com/page#tabs-2
但這不起作用，因為具有 id 的選項卡窗格tabs-2沒有.active類。
但是，如果我嘗試加載https://sitename.com/page#tabs-1頁面正確地將我重定向到具有 id 的選項卡窗格tabs-1（因為它.active默認具有類）
那么如何正確地將用戶重定向到不同的選項卡窗格？
uj5u.com熱心網友回復：
您實際上不需要檢查片段即可在這些選項卡之間切換。
1) 從這里匯入 jQuery或者：
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
2）將此部分添加到您的代碼中。
<script>
$(document).ready(function () {
$('.nav-tabs a').click(function () {
$(this).tab('show');
});
});
</script>
uj5u.com熱心網友回復：
在您洗掉之前，我已經開始回答您的舊問題，但又是這樣。我不明白你想要實作什么，所以我只是查看了代碼并制作了我的版本，它不是最好的，但它可以作業。
這是一個 onClick 事件處理程式，它在您的導航中單擊時執行并更改活動類。
// onClick event handler, gets executed on click
$(".nav-link").on("click", (e) => {
// store clicked element
const listItem = e.target;
// get hash
const hash = e.target.hash;
// remove all active classes
$(".nav-link, .tab-pane").removeClass("active");
// add active class to list item and tab panes
$(listItem).add(hash).addClass("active");
});
這部分會在您重新加載頁面時執行。您需要更改 HTML 以使其正常作業，因此從 nav-link 中洗掉活動類并為每個鏈接添加一個附加類（tabs-1、tabs-2 和 tabs-3）。
// when page is reloaded
$(document).ready(() => {
// get current hash
const hashList = window.location.hash;
const hashItems = hashList.slice(1);
// remove all active classes
$(".nav-link, .tab-pane").removeClass("active");
// add active class to nav-link and pane
$(hashList).add(`.${hashItems}`).addClass("active");
});
當然，這兩個片段都需要包含在你的腳本標簽中，如果還沒有匯入 jQuery，你也需要匯入。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/421173.html
標籤：