面對使用jquery訪問div標籤內容的麻煩

Question

我在使用jquery處理div標籤內容時遇到了麻煩。我有兩個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>