9

3 つの異なるコンテンツ タブを備えた Bootstrap の「タブ」ナビゲーションがあります。タブナビゲーションの外側からタブの1つにリンクしたいことを除いて、それは完全に機能します。つまり、誰かがタブ ウィンドウ外のリンクをクリックすると、そのタブが「アクティブ」に設定され、コンテンツが表示されます。

現在、そのタブのコンテンツは正しく表示されていますが、タブは「アクティブ」に設定されていません。誰かがクリックしたかのように「アクティブ」にするにはどうすればよいですか?

コードは次のとおりです。

<div>
<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>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">Home Content</div>
  <div class="tab-pane" id="profile">Profile Content</div>
  <div class="tab-pane" id="messages">Messages Content</div>
</div>
</div>

<p></p>

<a href="#profile" data-toggle="tab">Profile Link From Outside</a>

私はそれをよりよく示すためにjsFiddleを作成しました：http://jsfiddle.net/fLJ9E/

助けやヒントをありがとうございました:)

4

7 に答える 7

8

I had the same issue, and opted to just trigger a click event on the proper tab, and let Bootstrap do what is needed.

$('#link').on('click', function(){
  $('.nav-tabs a[href="#profile"]').click();
});
于 2015-02-28T09:01:11.330 に答える
0

これを試して：

<li ....> 
<a href="#tab-number">Tab Title</a>
</li>

URL は次のようになります: "[URL]#tab-number"

お役に立てれば幸いです....よろしくお願いします...

于 2014-08-28T18:52:10.510 に答える