2016-05-30 4 views
4

リンクをクリックして別のページに移動して特定のブートストラップタブを開く方法はありますか?ここで特定のブートストラップタブへのリンクをクリック

は私のhtmlです:

<a href="/admin/#tab2">View Tab 2</a> 

そして、私の/ adminにルート上の私は、ブートストラップタブがあります:私のリンクをクリックすると

<ul class="nav nav-tabs"> 
    <li class="active"><a href="#tab1" data-toggle="tab">Completed</a></li> 
    <li><a href="#tab2" data-toggle="tab">Confirmed</a></li> 
    <li><a href="#tab3" data-toggle="tab">Shipped</a></li> 
</ul> 

を、私はアプリが/ adminに行きたいです経路は#tab2の内容を表示します。助けてもらえますか?

ありがとうございます!

答えて

5

はい、これを行うことができます。しかし、カスタムjQueryが必要になります。あなたが次にtarget="_blank"

<a target="_blank" href="/admin/#tab2">View Tab 2</a> 

を使用して新しいタブで開くようにあなたのリンクが必要になります

まず、あなたがしようとしているページで、開くためにそのタブをトリガーする必要があります。あなたは行うことができます(タブは、ID「myTabs」を持っている)、このコードを使用して:

$('#myTabs a[href="' + window.location.hash + '"]').tab('show') 
彼らのウェブサイト上

詳細情報:http://getbootstrap.com/javascript/#tabs

1

私は似たようなを実装するために持っていたし、次のプラグインが助けました私のトン:http://www.aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/

基本的には、各タブがクリックされたとき(ユーザがリンクを共有できるように)、URLに基​​づくタブのアクティブ化、バックボタンのサポート、URLの更新を実装する軽量のjQueryプラグインです。

それはそうのようなnav-tabs要素に呼ばれています:

$('.nav-tabs-sticky').stickyTabs(); 
関連する問題