web-dev-qa-db-ja.com

Bootstrap nav-tabsで別のタブから特定のタブにジャンプ

私は次の設定でBootstrapのnav-tabsを使用しています：

<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="tabContent" class="tab-content">
  <div class="tab-pane active in" id="home">
    <form id="tab">
        <label>Name:</label>
        <input type="text" value="fooBar" class="input-xlarge">
    </form>
  </div>
  <div class="tab-pane fade" id="profile">
    <form id="tab2">
        <a href="#home">Home</a>
    </form>
  </div>
</div>

ご覧のとおり、profileタブにリンクがあり、最初のタブにリンクしています。アンカーをクリックしてもURLバーのURLは変更されますが、特定のタブにジャンプすることはありません。

その後、一般にタブに直接リンクすることは不可能であることに気づいたので、 Twitterから次のコードを追加しましたBootstrapタブ：ページの再読み込み時に特定のタブに移動するまたはハイパーリンク ：

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash;
})

今、私はどこかから特定のタブにリンクできますが、ナビゲーションバーがあるのと同じページにいる場合はできません。ページをリロードすると、目的のタブにジャンプするので、 Javascriptからの解決策を使用して、ページを強制的にリロードできると思いました：アンカータグを使用してサイトを本当にリロードするにはどうすればよいですか？ ：

window.location.reload(true);

ただし、これは、タブをクリックするたびにリロードされ、さらにアンカーをクリックしてもhomeタブが読み込まれませんでした。

したがって、別のタブから特定のidにジャンプするにはどうすればよいですか？

javascripttwitter-bootstraptabs
11
cherrun

あなたが言及する他の答えによって間違った足が置かれたかもしれません...同じページ内からタブを変更することはかなり簡単です（別のタブにいるかどうかに関係なく）：あなたは基本=を使用することができますbootstrap タブナビゲーションJavaScript このため。

最初にhtmlを少し変更します。<ul class="nav nav-tabs" id="myTab">..にIDを追加してから、2番目のタブにリンクを追加します。

<div class="tab-pane fade" id="profile">
  <form id="tab2">
    <a href="#" id="gotohome">Jump to home tab (this works)</a>
...

準備ができているドキュメントに以下を追加します。

$('#gotohome').click(function() {
  $('#myTab a[href="#home"]').tab('show');
});

jsFiddle での作業例。

39
Marijn

与えられた答え

$('#myTab a[href="#home"]').tab('show');

javaScriptソフトウェアを特定のタブにジャンプさせるためにも使用できます。次のURLを使用して、起動時に特定のタブにジャンプしたいとします。

http://myDomain/myApp#tabSomewhere

あなたはそれがうまくいくと想像することができます（あなたはいくつかの追加のコーディングをする必要があります）。最初のページがtabHomeにあるとします（ 'active'クラスでそのページをアクティブにします。javascriptを使用してそのページに戻ろうとすると、次のコマンドを使用してtabHomeからアクティブクラスを削除する必要があります。

$('li').removeClass('active');
0
Harm