2

Web サイトで Bootstrap タブを使用しています。ページが読み込まれると、実行時に動的コンテンツを使用してタブにデータが入力されます。そのためにアンカータグの属性を使用してdata-targetいますが、まったく機能していないようです。

これが私がこれまでに試したことです：

HTML

<div class="container">
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="showTab1.do" data-target="#test_1" aria-controls="test_1" role="tab" data-toggle="tab">Tab 1</a>
            </li>
            <li role="presentation">
                <a href="showTab2.do" data-target="#test_2" aria-controls="test_2" role="tab" data-toggle="tab">Tab 2</a>
            </li>
            <li role="presentation">
                <a href="showTab3.do" data-target="#test_3" aria-controls="test_3" role="tab" data-toggle="tab">Tab 3</a>
            </li>   
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="test_1"></div>
            <div role="tabpanel" class="tab-pane active" id="test_2"></div>
            <div role="tabpanel" class="tab-pane active" id="test_3"></div> 
        </div>
    </div>
</div>

ここでは、アンカー タグで使用するときに、showTab1.dodiv 内のリモート ファイルのコンテンツを読み込もうとしています。しかし、それは機能していません。私が知っているのは、データターゲットを使用している場合、タブにデータをロードするために jQuery/JavaScript を記述する必要がないということです。私の Bootstrap のバージョンは v3.3.6 です。id="test_1"data-target="#test_1"

私が間違っているところを修正してください。ありがとう

4

3 に答える 3

1

loadデータ属性を使用して、別の URL からタブのコンテンツに自動的にデータを挿入する方法はありません。load()タブの表示イベントが発生したときにjQueryメソッドを起動する必要があります...

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  ...

  $(target).load(url,function(result){      
    ...
  });
});

例: http://codeply.com/go/xZfTnAtKUM

于 2016-02-06T14:23:35.227 に答える
0

HTML :

<div class="container">
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#test_1" aria-controls="test_1" role="tab" data-toggle="tab">Tab 1</a>
            </li>
            <li role="presentation">
                <a href="#test_2" aria-controls="test_2" role="tab" data-toggle="tab">Tab 2</a>
            </li>
            <li role="presentation">
                <a href="#test_3" aria-controls="test_3" role="tab" data-toggle="tab">Tab 3</a>
            </li>   
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="test_1"></div>
            <div role="tabpanel" class="tab-pane" id="test_2"></div>
            <div role="tabpanel" class="tab-pane" id="test_3"></div> 
        </div>
    </div>
</div>

jQuery load を使用してタブのコンテンツをロードします

ジャバスクリプト:

<script>
$(document).ready(function () {
    $('#test_1').load('showTab1.do');
    $('#test_2').load('showTab2.do');
    $('#test_3').load('showTab3.do');
});
</script>
于 2016-02-06T12:56:51.887 に答える
0

いくつかのエラーがありましたが、これは機能します。タブ 1、2、および 3 をタブ ペインに追加したので、ナビゲーション リンクをクリックしたときに結果を確認できます (フローを台無しにしないように、テキストを削除してください)。

<div class="container">
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#test_1" aria-controls="test_1" role="tab" data-toggle="tab">Tab 1</a></li>
            <li role="presentation"><a href="#test_2" aria-controls="test_2" role="tab" data-toggle="tab">Tab 2</a></li>
            <li role="presentation"><a href="#test_3" aria-controls="test_3" role="tab" data-toggle="tab">Tab 3</a></li>   
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="test_1">Tab 1</div>
            <div role="tabpanel" class="tab-pane fade" id="test_2">Tab 2</div>
            <div role="tabpanel" class="tab-pane fade" id="test_3">Tab 3</div> 
        </div>
    </div>
</div>

これがお役に立てば幸いです。次に、以下で説明するように .load() メソッドを使用してデータをタブ ペインにロードします。

于 2016-02-06T12:59:08.987 に答える