Question

我已在我的页面上实现了一个引导向导，但在页面加载时我必须转到第二个选项卡或向导部分，所以我该怎么办？如何将第二个标签或部分ID传递给URL，以便它直接将我带到页面的某个部分？

Answer 1

试试这个：

$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)

Answer 2

考虑您有以下标签结构：

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" id="tablist">
    <li class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
  </div>
</div>

考虑此标签位于网址/profile/me中。现在，您可以使用以下网址在页面加载的标签页之间切换，如：/profile/me#home，/profile/me#profile或/profile/me#messages。然后，您将需要以下Javascript代码：

$(document).ready(function() {
    // Register an event
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        // Set the hash with the active tab on tab change
        location.href = $(e.target).attr("href")
    });

    // You will get like "", "#profile", "#messages"
    var tabName = location.hash;
    // remove # from the name
    tabName = tabName.substring(1);

    if (tabName) {
        $("#tablist a[href='#" + tabName + "']").tab('show');
    }
});

使用不带HTML5模式的AngularJS路由

如果您使用非HTML5模式的AngularJS路由，则需要稍微更改一下代码，因为该URL已经有#

如何在页面加载时直接转到html页面的特定部分？

2 个答案:

使用不带HTML5模式的AngularJS路由