html - 页面中的重叠 div

Question

您好，我正在构建这个迷你页面。

我需要一个带有表格的 div，以便在单击按钮时用表格覆盖另一个 div.

点击链接前我的页面:

点击按钮后当前我的页面:

正如我们所见，两个 div 的表格都是可见的。我不想要它。我想要一个 div 完全覆盖另一个 div。

我该怎么做？

Answer 1

我认为使用 z-index 没问题，将使一个 div 位于另一个 div 之上，但是您可以使用 javascript 在单击另一个 div 时隐藏/显示 div!

像这样:

<div id="tab_one" onmousedown="showDivOne()"></div>
<div id="tab_two" onmousedown="showDivTwo()"></div>

<script>

function showDivOne(){

  var tabOne = document.getElementById('tab_one');
  var tabTwo = document.getElementById('tab_two');

  if(tabOne.style="none"){
     tabOne.style.display="block"
     tabTwo.style.display="none"
}

}

function showDivTwo(){

  var tabOne = document.getElementById('tab_one');
  var tabTwo = document.getElementById('tab_two');

  if(tabTwo.style="none"){
     tabTwo.style.display="block"
     tabOne.style.display="none"
}

}

</script>

通过使用类似这样的东西，您将通过使用 javascript 在 css 中更改它们的显示值来隐藏/显示 div!希望对您有所帮助。