如何通过重定向更改选定的选项卡

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>

我尝试了不同的选项，但没有人让另一个选项卡成为默认选项卡。控制台中也没有错误。我假设问题出在包含的 bootstrap/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

下面的代码片段正在运行，class活动选项卡窗格的 tab-pane fade active in，class活动导航项的 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 bootstrap 版本不同。修复后，这是正常工作所需的代码：

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

如何通过重定向更改选定的选项卡

How to change selected tab by redirection

javascript

jquery

tabs

bootstrap-4