2

タブナビゲーション付きのB.htmlとして html ページがあります。以下のように、HTMLページでタブをタブ化可能にしました。

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

A.htmlとして別の html ページがあります。A.htmlページには、 T1とT2として2つあります。T1をクリックすると、 B.htmlにリダイレクトし、コンテンツをTab 1に表示する必要があり、 T2をクリックすると、 B.htmlにリダイレクトし、コンテンツをTab 2に表示する必要があります。a tags

以下のようにしてみました。

<a href="http://www.abc.com/B.html#tab1">T1</a>
<a href="http://www.abc.com/B.html#tab2">T2</a>

しかし、これはうまくいきませんでした。常に tab1 を選択します。どうすればこれを解決できますか?

4

1 に答える 1

2

これには javascript/jquery を使用し、ハッシュ値を読み取り、目的のタブを開くことができます。

マークアップ:

<div class="tabbable">
  <ul class="nav nav-tabs" id='my_tab'>
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

Jクエリ: 

    var tabs = $("#my_tab");
    if (window.location.hash === '#tab1') {
        $('#my_tab a:first').tab('show');     
    }
    else if(window.location.hash === '#tab2') {
        $('#my_tab a:last').tab('show');     
    }

上記は非常に一般的なコードであり、必要に応じて最適化できます。

于 2013-08-26T09:48:55.360 に答える