Question

我知道有很多关于隐藏的问题 - 显示一个div：我尝试了所有这些但是似乎没什么用。

我有一个表单，并在加载页面div 1显示。一旦用户点击“下一步”按钮，则需要显示div 2（之前未显示）。我需要帮助的是点击“下一步”按钮显示div 2

这是我多次尝试之一：

        <div>
        table 1
        </div>

<button name="next" onclick="javascript:showDiv();"> Next </button>

<script type="text/javascript">
    function showDiv() {
           div = document.getElemntById('dynamic');
           div.style.visibility = "visible";       
    }
</script>

<div id="dynamic" style="display:none"> 
table 2   
        <input type="submit" value="Submit"/>  
</div>        
    </form>  

</body>

如果有人能帮助我，我将非常感激！谢谢

Answer 1

您需要在"display:none"和"display:block"之间切换才能隐藏并显示div。您的功能也应该是document.getElementById而不是document.getElemntById

＆＃13;

 function showDiv() {
           div = document.getElementById('dynamic');
           div.style.display = "block";       
    }

＆＃13;

<button name="next" onclick="javascript:showDiv();"> Next </button>



<div id="dynamic" style="display:none"> 
table 2   
        <input type="submit" value="Submit"/>  
</div>

＆＃13;

Answer 2

通过将display: none设置为visibility，我们无法取消visible。 display属性确定布局引擎如何定位div，visibility属性确定是否呈现div。所以如果你用

开始div

<div id="dynamic" style="visibility:hidden">

应该可以正常工作。我通常不建议使用display: none隐藏内容，因为它会强制浏览器重新布局可以移动元素的窗口。使用visibility意味着一切都保持不变。

Answer 3

if(document.getElementById("div1").style.display == "none")
{
    document.getElementById("div1").style.display = "";//show it
}
else
{
    document.getElementById("div1").style.display = "none";//hide it
}

Javascript - 将div部分设置为隐藏

3 个答案: