2

TwitterBootstrapを使用して作成されたタブがいくつかあるとします。同じ正確なページで、あるタブから別のタブにリンクするにはどうすればよいですか？

たとえば、最初のタブで、2番目のタブにリンクしたいとします。

4

2 に答える 2

2

提案されたソリューションのわずかな変形で、私により適しています：

HTML:

<a class="btn" href="#login-signup" data-toggle="destination-tab">Sign up</a>

JS:

$(document).on('click', 'a[data-toggle="destination-tab"]', function(event) {
    event.preventDefault();
    var hash = this.href.replace(/^.+#/, '#');
    $('a[href="' +hash+ '"][data-toggle=tab]:first').click();
});

このバージョンには、リンクに href 属性を使用できるという利点があり、「クリック」しているリンクが実際にタブを切り替えるものであることを確認し、(重要ではありませんが) リンク先のリンクの数を制限します。 1。

于 2013-09-02T13:13:54.927 に答える
1

公式のBootstrabGitリポジトリでこれに関して開かれた問題がありました。Fatからの回答は、私が理解するのに1秒かかり、比較的簡単にスケーリングできるようにしたかったのです。

ここにいくつかのコードと実用的なフィドルがあります。

$("a[data-tab-destination]").on('click', function() {
    var tab = $(this).attr('data-tab-destination');
    $("#"+tab).click();
});

上記のjqueryを使用することに加えて、各タブアンカーにIDを与える必要があります。

<ul class="nav nav-tabs" id="myTabs">
  <li class="active"><a id="tab-1" href="#one" data-toggle="tab">TAB #1</a></li>
  <li><a href="#two" id="tab-2" data-toggle="tab">TAB #2</a></li>
  <li><a href="#three" id="tab-3" data-toggle="tab">TAB #3</a></li>
</ul>

次に、次のようにカスタムデータ属性でそのIDを参照します。

<a data-tab-destination="tab-2">Go to Tab #2</a>

これが実用的なフィドルです：http： //jsfiddle.net/technotarek/3hJ46/

于 2013-02-28T18:47:10.557 に答える