时间戳

首页 > 解决方案 > 单击时如何使我的内部 div 中的元素覆盖整个外部 div？

javascript - 单击时如何使我的内部 div 中的元素覆盖整个外部 div？

问题描述

我有一个位于屏幕中心的 div（page2box），它依次划分为不同的 div。它们看起来像这样： 在此处输入图像描述

我想要的是，当我单击 Capture the Flag div 时，所有其他 div（Hackathon、Competitive prog... 和人工智能）都会消失，然后 Capture the Flag div 会覆盖整个 div（page2box）。

以下是相关代码：

#page2{
    background: linear-gradient(-180deg, #2B1F2D, rgb(77, 35, 49), rgb(87, 23, 44));
    height:100vh;
  

}

#page2box{
  height:90vh;
  width: 90%;
  background-color: darkblue;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}

.page2Items{
  height:100%;
  width:25%;
}

.upper{
  height:40%;

  width:100%;
  font-family: 'Cinzel', Arial, Helvetica, sans-serif;
  font-size: 280%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.lower{
  height:60%;
  font-family: 'Average', sans-serif;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 150%;
  text-align: center;
}

#elem1{
  background-color: cyan;
}

#elem2{
  background-color: red;

}

#elem3{
  background-color: blueviolet;

}

#elem4{
  background-color: orangered;

}
		<div id = "page2">
            <div id="page2box">
        <div class="page2Items" id="elem1">
            <div class="upper">Capture The Flag</div>
            <div class="lower">Lorem ipsum dolor sit amet, consectetit. Mosielit. Mosim felis libero, tincidunt eu odio vel, vulputate tinci Integer odio dolor, elementum in sem a, tristique cursus tortor. Duis sodales varius turpis ac aliquam. Integer congue fermentum posuere. Pellentesque varius massa at justo laoreet, non interdum nunc pretium. Integer porttitor tempor ante, vel laoreet sem placerat in.</div>
        </div>	
        <div class="page2Items" id="elem2">
            <div class="upper">Hackathon</div>
            <div class="lower">Lorem ipsum dolor sit amet, consectetit. Mosielit. Mosim felis libero, tincidunt eu odio vel, vulputate tinci Integer odio dolor, elementum in sem a, tristique cursus tortor. Duis sodales varius turpis ac aliquam. Integer congue fermentum posuere. Pellentesque varius massa at justo laoreet, non interdum nunc pretium. Integer porttitor tempor ante, vel laoreet sem placerat in.</div>           
        </div>	
        <div class="page2Items" id="elem3">
            <div class="upper">Competitive Prog...</div>
            <div class="lower">Lorem ipsum dolor sit amet, consectetit. Mosielit. Mosim felis libero, tincidunt eu odio vel, vulputate tinci Integer odio dolor, elementum in sem a, tristique cursus tortor. Duis sodales varius turpis ac aliquam. Integer congue fermentum posuere. Pellentesque varius massa at justo laoreet, non interdum nunc pretium. Integer porttitor tempor ante, vel laoreet sem placerat in.</div>            
        </div>	
        <div class="page2Items" id="elem4">
            <div class="upper">Artificial Intelligence</div>
            <div class="lower">Lorem ipsum dolor sit amet, consectetit. Mosielit. Mosim felis libero, tincidunt eu odio vel, vulputate tinci Integer odio dolor, elementum in sem a, tristique cursus tortor. Duis sodales varius turpis ac aliquam. Integer congue fermentum posuere. Pellentesque varius massa at justo laoreet, non interdum nunc pretium. Integer porttitor tempor ante, vel laoreet sem placerat in.</div>            
        </div>		
		
		
    </div>
		</div>

我试图更改页面的 innerHTML，但这造成了很多混乱。我该如何做到这一点？如果可能，请尝试提供一个仅使用纯 CSS 和/或 vanilla JS 的解决方案。

标签： javascripthtmlcss

解决方案

以下更改将完成这项工作：

function expand(targetElementId) {
  let targets = document.getElementsByClassName("page2Items");

  let target = document.getElementById(targetElementId);
  if(target.style.width=="100%"){
    for (let i = 0; i < targets.length; i++) {
      targets[i].style.width = "25%";
      targets[i].style.display = "inline-block";
    }
  } else {
    for (let i = 0; i < targets.length; i++) {
      if (targets[i].id == targetElementId) {
        targets[i].style.width = "100%";
      } else {
        targets[i].style.display = "none";
      }
    }
  }
}

在 HTML 添加点击事件，传递每个 div 上的 id（用户正在点击）：

<div #elem1 class="page2Items" id="elem1" onclick="expand('elem1')">...</div>
<div #elem2 class="page2Items" id="elem2" onclick="expand('elem2')">...</div>
<div #elem3 class="page2Items" id="elem3" onclick="expand('elem3')">...</div>
<div #elem4 class="page2Items" id="elem4" onclick="expand('elem4')">...</div>

css 文件不需要更改。JS 将处理该功能。

希望这能按预期工作。

推荐阅读