0

わかりました。Bootstrap タブを持つアプリケーションを構築しています。Twitter Bootstrap が提供するすべての .js ファイルが head タグに含まれています。

このようなタブを追加すると機能します

<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
    <li class="active"><a href="#tab1">Post Update</a></li>
    <li><a href="#tab2">Post Photos</a></li>
    <li><a href="#tab3">Post Video</a></li>
    <li><a href="#tab4">Create a Poll</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">Test 1</div>
    <div class="tab-pane" id="tab2">Test 2</div>
    <div class="tab-pane" id="tab3">Test 3</div>
    <div class="tab-pane" id="tab4">Test 4</div>
</div>
<script>
    $(function(){
        $('#myTab a:last').tab('show');
    });
</script>

しかし一方で、JavaScript と HTML のタブで ID を変更すると、それが機能しなくなります...

<ul class="nav nav-tabs" data-tabs="tabs" id="changedID">
    <li class="active"><a href="#tab1">Post Update</a></li>
    <li><a href="#tab2">Post Photos</a></li>
    <li><a href="#tab3">Post Video</a></li>
    <li><a href="#tab4">Create a Poll</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">Test 1</div>
    <div class="tab-pane" id="tab2">Test 2</div>
    <div class="tab-pane" id="tab3">Test 3</div>
    <div class="tab-pane" id="tab4">Test 4</div>
</div>
<script>
    $(function(){
        $('#changedID a:last').tab('show');
    });
</script>

ブートストラップ タブでこの問題を解決する方法はありますか?同じページに複数のタブ セットを配置できない場合、これは非常に煩わしくなります。

4

2 に答える 2

2

リンクに data-toggle="tab" を追加してみて、ページ上の 2 番目のタブ セットの ID が異なることを確認してください。

http://jsfiddle.net/JqGt9/1/

<div class="container">
<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#tab1" data-toggle="tab">Post Update</a></li>
    <li><a href="#tab2" data-toggle="tab">Post Photos</a></li>
    <li><a href="#tab3" data-toggle="tab">Post Video</a></li>
    <li><a href="#tab4" data-toggle="tab">Create a Poll</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">Test 1</div>
    <div class="tab-pane" id="tab2">Test 2</div>
    <div class="tab-pane" id="tab3">Test 3</div>
    <div class="tab-pane" id="tab4">Test 4</div>
</div>
</div>
<div class="container">
<ul class="nav nav-tabs" id="myTab2">
    <li class="active"><a href="#tab5" data-toggle="tab">Post Update</a></li>
    <li><a href="#tab6" data-toggle="tab">Post Photos</a></li>
    <li><a href="#tab7" data-toggle="tab">Post Video</a></li>
    <li><a href="#tab8" data-toggle="tab">Create a Poll</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab5">Test 5</div>
    <div class="tab-pane" id="tab6">Test 6</div>
    <div class="tab-pane" id="tab7">Test 7</div>
    <div class="tab-pane" id="tab8">Test 8</div>
</div>
</div>
于 2013-08-30T05:26:22.537 に答える
0 
Try this format.

<ul class="nav nav-tabs" id="myTab">
<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> I'm in Section 2.</p>
</div>
</div>


----------
$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})
于 2013-08-30T05:25:15.937 に答える