Question

我在没有使用任何JQuery的情况下重建页面，我需要隐藏div而不使用display none。我隐藏的div持有jotform中的表单，而display 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

您可以使用溢出：隐藏

[[...]]

以下是示例：jsfiddle

在点击修复

1 个答案: