jqueryを使用してdivタブコンテンツにアクセスする際に問題が発生しました

Question

jqueryを使用してdivタブコンテンツを処理する際に問題が発生しました。 2つのdivタブ（myTab1とmyTab2）があり、それぞれのタブに異なる情報が表示されています。ボタンをクリックすると、 '作成' divタグにアクセスし、cppタブの下に情報を表示します。しかし、私はjavaタブの下の情報にアクセスしようとしているとき、それは表示されていません。私は動的に選択したタブに応じて情報を表示したい。

これは私のhtmlコードです：

$(document).ready(function() { 
 
    $("#myTab a").click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).tab('show'); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="create"> 
 
    <ul class="nav nav-tabs" id="myTab" style="width:22%"> 
 
    <li class="active"><a href="#cpp">C++</a></li> 
 
    <li><a href="#java">Java</a></li> 
 
    <li><a href="#python">Python</a></li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
    <div id="cpp" class="tab-pane fade in active"> 
 
     <h3>#Creating an array in C++</h3> 
 
    </div> 
 
    <div id="java" class="tab-pane fade"> 
 
     <h3>#Creating an array in Java</h3> 
 
    </div> 
 
    <div id="python" class="tab-pane fade"> 
 
     <h3>#Creating an array in Python</h3> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!--#End of create div--> 
 
<div class="insert"> 
 
    <ul class="nav nav-tabs" id="myTab2" style="width:22%"> 
 
    <li class="active"><a href="#cpp">C++</a></li> 
 
    <li><a href="#java">Java</a></li> 
 
    <li><a href="#python">Python</a></li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
    <div id="cpp" class="tab-pane fade in active"> 
 
     <h3>#Inserting an array in C++</h3> 
 
    </div> 
 
    <div id="java" class="tab-pane fade"> 
 
     <h3>#Inserting an array in Java</h3> 
 
    </div> 
 
    <div id="python" class="tab-pane fade"> 
 
     <h3>#Inserting an array in Python</h3> 
 
    </div> 
 
    </div> 
 
</div>

誰かがこれで私を助けてください！

Answer 1

複数の要素に同じIDを使用することはできません。代わりに異なるIDを使用することも、JS .nav-tabs aの更新セレクタを使用することもできません。

$(document).ready(function() { 
 
    $(".nav-tabs a").click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).tab('show'); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="create"> 
 
    <ul class="nav nav-tabs" id="myTab" style="width:22%"> 
 
    <li class="active"><a href="#cpp">C++</a></li> 
 
    <li><a href="#java">Java</a></li> 
 
    <li><a href="#python">Python</a></li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
    <div id="cpp" class="tab-pane fade in active"> 
 
     <h3>#Creating an array in C++</h3> 
 
    </div> 
 
    <div id="java" class="tab-pane fade"> 
 
     <h3>#Creating an array in Java</h3> 
 
    </div> 
 
    <div id="python" class="tab-pane fade"> 
 
     <h3>#Creating an array in Python</h3> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!--#End of create div--> 
 
<div class="insert"> 
 
    <ul class="nav nav-tabs" id="myTab2" style="width:22%"> 
 
    <li class="active"><a href="#myTab2-cpp">C++</a></li> 
 
    <li><a href="#myTab2-java">Java</a></li> 
 
    <li><a href="#myTab2-python">Python</a></li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
    <div id="myTab2-cpp" class="tab-pane fade in active"> 
 
     <h3>#Inserting an array in C++</h3> 
 
    </div> 
 
    <div id="myTab2-java" class="tab-pane fade"> 
 
     <h3>#Inserting an array in Java</h3> 
 
    </div> 
 
    <div id="myTab2-python" class="tab-pane fade"> 
 
     <h3>#Inserting an array in Python</h3> 
 
    </div> 
 
    </div> 
 
</div>