使用 javascript 在两个 div 标签之间切换

Question

我在两个 div 之间使用 JQuery 切换时遇到了问题。我对 JQuery 了解不多。 我想在单击创建时显示 div1(create) 并且应该隐藏 div2(insert)。同样，当我单击插入时，它应该显示 div2(insert) 并隐藏 div1(create)。有人可以帮我解决这个问题吗？

这是锚标记的代码 #div标签1的开始

 <div id="first"><h2 align="center">Array Operations</h2><br><br><br>
                   <a href="create">Creation</a><br>
                   <a href="insert">Insertion</a><br>
 </div> #End of div1

这是 div 标签的代码

<div id="second"> #Start of div tag2
 <div class="create">
  <ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#cpp">C++</a></li>
  </ul>
 <div class="tab-content">
    <div id="cpp" class="tab-pane fade in active">
        <h3>#Creating an array in C++</h3>
    <p>#include &lt; iostream &gt; <br>
    using namespace std;<br>
    int a [10]</p>
    </div>
 </div>
</div> #End of create div
<div class="insert">
   <ul class="nav nav-tabs" id="myTab">
     <li class="active"><a href="#cpp">C++</a></li>
   </ul>
  <div class="tab-content">
    <div id="cpp" class="tab-pane fade in active">
      <h3>#Inserting an array in C++</h3>
      <p>#include &lt; iostream &gt; <br>
      using namespace std;<br>
      int a [10]</p>
    </div>
  </div>
</div> #End of insert div
</div> #End of div tag2

这是第一个 div 标签的 css

<script type="text/javascript">
  $(document).ready(function(){ 
    $("#myTab a").click(function(e){
     e.preventDefault();
     $(this).tab('show');
  });
});
</script>   
<style>
#first {
width: 25%;
float: left;
height: 300px;
border-left: 1px solid gray;
border-top: 1px solid gray;
border-right: 1px solid gray;
}
#second {
width: 70%;
float: left;
height: 300px;
border-top: 1px solid gray;
}
</style>

这是jquery

$('.insert').hide();
 $('.create, .insert').on('click',
  function() {
  $('.create, .insert').toggle()
 }
);

Answer 1

我为所有页面部分添加了一个名为 .panel 的类，默认情况下隐藏面板 (display: none;)，并为第一个面板提供了一个 .active 类，它将显示一个面板。然后，当您单击顶部的链接之一时，使用href 属性定位面板的类，从您未单击的任何面板中删除.active，并将.active 添加到您点击了。

var $panels = $('.panel'),
    $links = $('#first a');
$links.on('click',function(e) {
  e.preventDefault();
  var $target = $('.' + $(this).attr('href'));
  $panels.not($target).removeClass('active');
  $target.addClass('active');
})

.panel {
  display: none;
}
.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
  <h2 align="center">Array Operations</h2><br><br><br>
  <a href="create">Creation</a><br>
  <a href="insert">Insertion</a><br>
</div>
<div class="create panel active">
  <ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#cpp">C++</a></li>
  </ul>
  <div class="tab-content">
    <div id="cpp" class="tab-pane fade in active">
      <h3>#Creating an array in C++</h3>
      <p>#include &lt; iostream &gt; <br> using namespace std;<br> int a [10]</p>
    </div>
  </div>
</div>
<div class="insert panel">
  <ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#cpp">C++</a></li>
  </ul>
  <div class="tab-content">
    <div id="cpp" class="tab-pane fade in active">
      <h3>#Inserting an array in C++</h3>
      <p>#include &lt; iostream &gt; <br> using namespace std;<br> int a [10]</p>
    </div>
  </div>
</div>