javascript - 使用 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>