如何通過重定向更改選定的選項卡

Question

我有以下問題。

我正在重定向到以下頁面“http://localhost/account#tab-verification”。 一旦用戶在該頁面上，我希望相應的選項卡處於活動狀態。

這是我的一些代碼：

<ul class="nav nav-pills" id="profile-tab" role="tablist">
    <li class="nav-item" role="presentation"><a class="nav-link active" id="personal-tab" data-toggle="pill" href="#tab-personal">Personal</a></li>
    <li class="nav-item" role="verification"><a class="nav-link" id="verification-tab" data-toggle="pill" href="#tab-verification">ID Verification</a></li>
</ul>
<br>
<hr />
<br>
<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="tab-personal" role="tabpanel" aria-labelledby="personal-tab">
    
    </div>
    <div class="tab-pane fade" id="tab-verification" role="tabpanel" aria-labelledby="verification-tab">
    
    </div>
</div>

這是我在頁面底部包含的 JS 代碼：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function () {
    ...
    var tabId = window.location.hash;
    // Select the tab
    // $('#profile-tab a:last').tab('show');
    $('#profile-tab a[href="' + tabId + '"]').tab('show');
});
</script>

我嘗試了不同的選項，沒有人制作另一個選項卡，然后默認激活。 控制台中也沒有錯誤。 我假設問題出在包含的引導程序/jquery 上？

Answer 1

我可以通過僅使用您提供的代碼中的注釋行來產生所需的結果，如下所示。 也許還有其他上下文可以解釋您的問題？

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function () {
    $('#profile-tab a:last').tab('show');
});
</script>

Answer 2

下面的代碼片段正在工作，活動標簽窗格的類是tab-pane fade active in ，活動 nav-item nav-item active的類。 nav-link 不需要任何活動的 class。

 $(function () { var tabId = window.location.hash; // Select the tab // $('#profile-tab a:last').tab('show'); $('#profile-tab a[href="' + tabId + '"]').tab('show'); });

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <ul class="nav nav-pills" id="profile-tab" role="tablist"> <li class="nav-item active" role="presentation"> <a class="nav-link" id="personal-tab" data-toggle="pill" href="#tab-personal">Personal</a> </li> <li class="nav-item" role="verification"> <a class="nav-link" id="verification-tab" data-toggle="pill" href="#tab-verification">ID Verification</a> </li> </ul> <br> <hr /> <br> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade active in" id="tab-personal" role="tabpanel" aria-labelledby="personal-tab"> tab-personal </div> <div class="tab-pane fade" id="tab-verification" role="tabpanel" aria-labelledby="verification-tab"> tab-verification </div> </div>

Answer 3

您應該能夠觸發對選項卡的點擊。

<script>
  $(function () {
    ...
    var tabId = window.location.hash;
    // Click the tab
    $('#profile-tab a[href="' + tabId + '"]').click();
  });
</script>

Answer 4

問題是不同的 css 和 js 引導程序版本。 一旦我解決了這個問題，這是正常工作所需的代碼：

var tabId = window.location.hash;
var firstTabEl = document.querySelector('#profile-tab a[href="' + tabId + '"]');
var firstTab = new bootstrap.Tab(firstTabEl);
firstTab.show();