Question

<div class="a">hello</div> <div class="b">bye</div>

我有一个单页网站，我希望首先加载div然后再加载第二个...我能用html和css做这个吗？或者它需要JavaScript或......

Answer 1

只需使用Javascript：

将您的身体更改为<body onload="onloadFunction()">
将style="display: none;"添加到div元素

添加以下脚本：

<script language="javascript" type="text/javascript"> 
    function onloadFunction(){
        document.getElementsByClassName("a").style.display = "true";
        document.getElementsByClassName("b").style.display = "true";
    } 
</script>

并更改文档的顺序。你希望拥有它的行。

Answer 2

你可以试试这样的东西。

$(document).ready(function() {
    $(".b").delay(2000).fadeIn(500); //class b is on delay
});

无法仅使用 HTML 和 CSS 。需要涉及 JavaScript 或 jQuery 代码。

Answer 3

是的，你需要javascript，我建议jquery（javascript库）。更多信息：http://www.w3schools.com/jquery/jquery_get_started.asp

这是工作示例（只需使用浏览器和点击按钮运行）：

<div class="a" style="display: none;">hello</div> 
<div class="b" style="display: none;">bye</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.a').show();
    setTimeout(function(){$('.b').show()}, 2000);
});
</script>

我想先加载第二个div，然后加第一个div

3 个答案: