javascript - 如何防止在页面中显示隐藏表单

Question

这里是新手，我目前正在使用 html 表单。我使用 Jquery 在页面加载时隐藏表单，但某些表单会持续显示一小段时间，然后在页面加载后隐藏。

这是我用于隐藏表单的 jquery 代码

 <script type="text/javascript" src="js/jquery1.10.2.js"></script>
 <script type="text/javascript">
    $(function(){
    $('#page1').show();
    $('#page2').hide();
    $('#page3').hide();
    $('#page4').hide();
    $('#page5').hide();
    $('#white_bg').hide();
    $('#background').hide();
    $('#bgw').hide();
    $('#bgb').hide();
    $('#aql_bgw').hide();
    $('#aql_bgb').hide();
    $('#secondary_form').hide();
    })
</script>

<!---body of the page goes here -->

我附上了页面加载时发生的情况的图片

几毫秒后它就消失了

如何使其加载而不显示隐藏的 div 和表单？

谢谢

Answer 1

您需要做的是使用 css 规则来隐藏这些元素，而不是使用 jQuery。由于您的 jQuery 是隐藏在 dom 就绪事件上执行的那些元素的脚本，因此在触发这些元素之前，这些元素将被显示。

因此，向这些元素添加一个像 hidden 的类，并添加一个 css 规则将显示设置为无(在页面标题中包含该规则，以便元素将呈现为隐藏)

.hidden {
    display: none;
}