css 用javascript切换显示

ipakzgxi 于 2023-03-05 发布在 Java

关注(0)|答案(2)|浏览(102)

<!-- 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中类为first的div，第一个隐藏的div必须显示，其他的保持隐藏。如果单击主div中类为second的div，第二个隐藏的div必须显示，其他的保持隐藏。并且这与其它隐藏的DIV相同。
我尝试使用javascript代码。但是隐藏的div只显示了一秒钟，然后又消失了。请提供这个问题的解决方案。

css

来源：https://stackoverflow.com/questions/75622974/toggle-display-with-javascript

2条答案

按热度按时间

bmvo0sr51#

欢迎来到SO，你不需要任何锚标记来实现这一点。
只需使用这个小js并将所有子内容 Package 在单个父项下

const link = document.querySelectorAll('.link');
const subcontent_children = Array.from(document.getElementById('sub-contents').children);

link.forEach(link=>{
  link.onclick = function(){
    const sub_cont_id = this.classList[1];
   subcontent_children.forEach(c=>{
      c.classList.toggle('show',c.id == sub_cont_id);
   }); 
    
  }
})

.hidden{
  display:none;
}
.show{
  display:block;
}
p{
margin:0;
}
.link{
  cursor:pointer;
  padding:5px;
}

.link:hover{
  border-bottom:1px solid lightgrey;
}

<div class="main-cont">
        <div class="link first"><p>Matrix Calculations</p></div>
       <div class="link second"><p>Vector Calculations</p></div>
       <div class="link third"><p><span>Trignometric</span> Calculations</p></div>
        <div class="link fourth"><p>Integration&<br>Differentiation</p></div>
    </div>
    <div id='sub-contents'> <!-- wrap all the sub in one parnet -->
      <div class="hidden" id='first'>
        <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>

    <div class="hidden" id='second'>
        <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>

    <div class="hidden" id='third'>
        <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>

    <div class="hidden" id='fourth'>
        <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>
    <div>

赞(0）回复(0）举报 2023-03-05

dced5bon2#

这是因为你用一个锚标签 Package 了这个div，每当你点击它们的时候，anchor标签就会刷新页面并重置整个脚本，所以你可以删除anchor标签或者在anchor标签的href中添加#。

赞(0）回复(0）举报 2023-03-05