前端div的隐藏与展示控制

• 需求：在项目中，需要在点击不同按钮时展示不同的div，另外，在初始进入页面时只想看见第一个div的展示，其他的div在点击对应按钮时才展示。
• 在寻求解决办法的过程中，找到控制展示及隐藏的属性visibility以及display，前者是在隐藏时仍让div占据位置，后者释放空间，看不到占位。
• 适合我的需要的是display。
• 解决办法：
  html部分

<div class="video-show1" id="div1"> //初始进入时需要展示的div
    <div class="window1" alt="1"></div>
</div>
<div class="video-show4" id="div4" style="display:none"> //在点击按钮时展示的div
    <div class="window4" alt="1"></div>
    <div class="window4" alt="2"></div>
</div>

js部分（用的按钮的控制）

btn1() {
    
    
   document.getElementById("div1").style.display = "block";//show当前div
   document.getElementById("div4").style.display = "none";//hidden当前div
},
btn2() {
    
    
   document.getElementById("div1").style.display = "none";
   document.getElementById("div4").style.display = "block";
},

这个实现的方法是点击按钮1触发div1显示，div4隐藏；点击按钮2触发div4显示，div1隐藏。