Question

我在网页上有两个div，需要在页面加载时隐藏，直到脚本块中的if语句指示何时显示div ..这是可能的，如何完成？我有一个jQuery链接，但我尝试过没有工作

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        body {
            background-color: #3da9cd;
            background:url('background.jpg');
            height: 50%;
            width: 50%;
            margin:0;
            padding: 0;
            overflow:auto;
        }
        h1 {
            font-size: 34px;
            margin: 0;
            padding: 0;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-weight: bold;
            color: #000000;
        .hidden { display: none; }
        .shown {display:block;}
}
</style>
<script type="text/javascript">


function WinLose()
{
    $("#win").hide();
$("#lose").hide();
    var x=document.getElementById("demo");
    x=x.innerHTML=Math.floor((Math.random()*5)+1);

    if (x==5)
    {
        $('#win').show()

    }
    else 
    {
        $('#lose').show()
    }

}

</script>

</head>
<body>


<p id="demo"></p>

<button onclick="WinLose()">Try it</button>

<!-- Win element -->
        <div id="win" class="hidden">Congratulations! You have won a prize. *UNIQUE CODE* Collect your prize from the Customer Services desk</div>

        <!-- The losing image div -->
        <div id="lose" class="hidden">Sorry, you have not won. Better luck next time</div>

</body>
</html>

Answer 1

CSS：

.DIV_CLASS{
    display:none;
}

JQuery的：

$(document).ready(function(){
    if(some statment){
        $('.DIV_CLASS').show();
    }
});

Answer 2

您应该使用css display属性设置div的可见性，如下所示：

.hidden { display: none; }

你的div就像这样：

<div class="hidden">first div</div>
<div class="hidden">second div</div>

然后使用你的，js删除hidden类或$.show()。

Answer 3

您要么在if语句中显示div，要么使用setInterval()或setTimeout()定期检查if语句集。

javascript在页面加载时隐藏div，直到语句条件选择div为止

3 个答案: