如何根据 URL 主题标签显示特定的 Bootstrap 选项卡窗格？

Question

我有 Bootstrap 可切换选项卡的默认标记。

如果我的 url 将其 ID 作为主题标签，如何打开特定的选项卡窗格（本例中为消息）？

即：www.mydomain.com/my-tabbed-page#messages

<div>

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

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

</div>

Answer 1

这是我的解决方案：

$(document).ready(function() {

    if ($('.nav-tabs').length > 0) { // if .nav-tabs exists
        var hashtag = window.location.hash;
        if (hashtag!='') {
            $('.nav-tabs > li').removeClass('active');
            $('.nav-tabs > li > a[href="'+hashtag+'"]').parent('li').addClass('active');
            $('.tab-content > div').removeClass('active');
            $(hashtag).addClass('active');
        }
    }

});