单击修复时显示隐藏 div

Question

我在不使用任何 JQuery 的情况下重建页面，我需要在不使用显示 none 的情况下隐藏 divs。我隐藏的 divs 持有来自 jotform 的表格，而显示 none 属性正在破坏我在 firefox 上的表格。我的解决方案是使用纯 javascript 并使用可见性和最大高度切换显示。

这是我的脚本：

 function showDiv(that) {
    var len = document.getElementsByTagName('div').length;
    for (var i = 0; i < len; i++) {
        document.getElementsByTagName('div')[i].style.visibility = "hidden";
        document.getElementsByTagName('div')[i].style.maxHeight = "0px";
    }
    var val = that.value;
    document.getElementById(val).style.visibility = "visible";
    document.getElementById(val).style.maxHeight = "10px";
}

我的CSS:

#div1, #div2, #div3 {
    visibility: hidden;
    max-height:0px;

}
.button {
    background-color: #cb3778;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 22px;
    cursor: pointer;
    font-family: Arial;
}

我的简化代码：

<p><input type="button" class="button" name="Showdiv1" value="div1" onclick="showDiv(this)" />
    <input type="button" class="button" name="Showdiv2" value="div2" onclick="showDiv(this)" />
    <input type="button" class="button" name="Showdiv3" value="div3" onclick="showDiv(this)" /></p>
<div id="0">Click a button to start</div>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3" style="margin-top:1500px;">div3</div>

这是一个工作演示：https://jsfiddle.net/cgrouge/a4wehtcd/2/

如您所见，由于 div 只是隐藏的，您仍然可以向下滚动页面到内容可见时的位置。在内容可见之前，我不想翻页滚动。有解决办法吗？

Answer 1

你可以使用溢出：隐藏

function showDiv(that) {
  var len = document.getElementsByTagName('div').length;
  for (var i = 0; i < len; i++) {
       document.getElementsByTagName('div')[i].style.visibility = "hidden";
       document.getElementsByTagName('div')[i].style.height = "0px";
       document.getElementsByTagName('div')[i].style.overflow = "hidden";
  }
  var val =  that.value;
  document.getElementById(val).style.visibility = "visible";
  document.getElementById(val).style.height = "10px";
  document.getElementById(val).style.overflow = "visible";
}

示例如下：jsfiddle

单击修复时显示隐藏 div

Show hidden div on click fix

html

javascript

hidden