用javascript切换显示

Question

<!-- This is the main div -->
<div class="main-cont">
  <a href=""><div class="sub-cont first"><p>Matrix Calculations</p></div></a>
  <a href=""><div class="sub-cont second"><p>Vector Calculations</p></div></a>
  <a href=""><div class="sub-cont third"><p><span>Trignometric</span> Calculations</p></div></a>
  <a href=""><div class="sub-cont fourth"><p>Integration&<br>Differentiation</p></div></a>
</div>
<!-- This is the first div -->
<div class="hidden">
  <h2 class="matrix">Matrix Calculations</h2>
  <div class="main-cont">
  <a href=""><div class="sub-cont matrix"><p>Basic <br>Calculations</p></div></a>
  <a href=""><div class="sub-cont matrix"><p>Determinant<br>of matrix</p></div></a>
  <a href=""><div class="sub-cont third matrix"><p><span>Inverse&</span><br>Transposition</p></div></a>
  <a href=""><div class="sub-cont matrix"><p>Eigen values&<br>Vectors</p></div></a>
  </div>
</div>
<!-- This is second div -->
<div class="hidden">
  <h2>Vector Calculations</h2>
  <div class="main-cont">
  <a href=""><div class="sub-cont"><p>Basic <br>Calculations</p></div></a>
  <a href=""><div class="sub-cont"><p>Determinant<br>of matrix</p></div></a>
  <a href=""><div class="sub-cont third"><p><span>Inverse&</span><br>Transposition</p></div></a>
  <a href=""><div class="sub-cont"><p>Eigen values&<br>Vectors</p></div></a>
  </div>
</div>
<!-- This is third div -->
<div class="hidden">
  <h2>Trigonometric Calculations</h2>
  <div class="main-cont">
  <a href=""><div class="sub-cont"><p>Basic <br>Calculations</p></div></a>
  <a href=""><div class="sub-cont"><p>Determinant<br>of matrix</p></div></a>
  <a href=""><div class="sub-cont third"><p><span>Inverse&</span><br>Transposition</p></div></a>
  <a href=""><div class="sub-cont"><p>Eigen values&<br>Vectors</p></div></a>
  </div>
</div>
<!-- This is fourth div -->
<div class="hidden">
  <h2>Calculus Calculations</h2>
  <div class="main-cont">
  <a href=""><div class="sub-cont"><p>Basic <br>Calculations</p></div></a>
  <a href=""><div class="sub-cont"><p>Determinant<br>of matrix</p></div></a>
  <a href=""><div class="sub-cont third"><p><span>Inverse&</span><br>Transposition</p></div></a>
  <a href=""><div class="sub-cont"><p>Eigen values&<br>Vectors</p></div></a>
  </div>
</div>

通过使用 css

display:none;

最初我隐藏了四个 div。如果单击主 div 的第一个类的 div，我想显示第一个隐藏的 div，必须显示第一个隐藏的 div，其他的应该保持隐藏。如果单击主 div 的第二类 div，则必须显示第二个隐藏的 div，而其他的应保持隐藏状态。和其他隐藏的 div 一样。
我尝试使用 javascript 代码。但隐藏的 div 仅显示一秒钟，然后再次消失。 请提供这个问题的解决方案。

Answer 1

发生这种情况是因为每当您单击锚标记刷新页面并重置整个脚本时，您都用锚标记包裹了该 div。所以你可以删除锚标签或者在锚标签的href中添加#。