Question

我似乎错过了JQuery Show（）的一些东西。我已经搜索了这个但是我从给定的例子中看不出我的语法有什么问题。我已经尝试将脚本标记移动到文档的底部。有什么根本我不理解吗？

这是我的页面。我想让它显示隐藏的div。

<!DOCTYPE html>
<head>

<style type="text/css">
.hidden {
    visibility: hidden;
}
</style>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".hidden").show()
    });
</script>
</head>
<body>
    <div class="hidden">
        <p>Can you see me?</p>
    </div>
</body>
</html>

我做错了什么？

Answer 1

jQuery的show()方法使用display属性。这样做：

.hidden {
   display: none;
}

这有一个好处，就是在首次加载DOM时不占用空间。

http://api.jquery.com/show/

Answer 2

据我所知，.show()用于在display:none;和display:block;之间切换，将您当前的css从visibility:hidden;更改为display:none;，或者您可以尝试以下操作jquery代码

<script type="text/javascript">
    $(document).ready(function() {
        $(".hidden").css('visibility','visible')
    });
</script>

Answer 3

jQuery .show()秘密调用.css( "display", "block")而不修改您的visible属性。因此，您应该使用display:none作为CSS属性。

http://jsfiddle.net/r5wL752j/

Answer 4

jquery的hide / show使用CSS属性display，而不是visibility。因此，如果您将<div>设置为display: none，那么您的示例就可以使用。

Answer 5

您有两种选择。要么改变css，要么使用像

这样的css（）方法

选项1

.hidden {
     display : none;
}

选项2

    $(document).ready(function() {
        $(".hidden").css("visibility", "visible");
     });

为什么不会这个<div> show（）？</div>

5 个答案: