使用jquery

Question

我在使用jquery处理div标签内容时遇到了麻烦。我有两个div选项卡（myTab1和myTab2），每个选项卡显示不同的信息。当我单击一个按钮时，它正在访问“create”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中更新选择器。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;