Question

我正在使用JQuery的document.ready来隐藏我的MVC母版页中的一些内容。但是，当页面加载时，我可以看到我正在消失闪烁的元素，然后消失。

我正是这样做的：

<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $("#HideDiv").remove()
        });
    </script>

我怎样才能摆脱闪光？我希望在页面渲染之前删除的元素消失了。

更新

我应该指出，我正在动态地执行此操作，隐藏某些页面上的某些内容。 HideDiv只是我给出的一个名字，也许是一个可怜的名字。

例如，我在顶部有一个菜单栏，其中包含指向各种页面的链接。当用户在该页面上时，我想删除指向页面的链接。我不是在每个页面上只手动添加想要的链接，而是将它们全部放在母版页中，我只是隐藏那些我不希望在页面上显示的链接。

显然是document.ready不是时候这样做了吗？有什么可能是更好的方法来实现这一目标？

Answer 1

如果您最初使用CSS隐藏元素，则不会显示它们：

<style type="text/css">
#HideDiv { display: none; }
</style>

如果无法做到这一点，您可以在元素后面紧跟一个脚本标记：

<div id="HdeDiv">...</div>
<script type="text/javascript">
$('#HideDiv').remove();
</script>

Answer 2

而不是删除使用fadeOut（）或hide（）;

$("#HideDiv").remove(); // remove completly removes from dom

以下内容给出了平滑效果

$("#HideDiv").fadeOut();

$("#HideDiv").hide()

Answer 3

您的JavaScript在页面加载之前不会运行 - 这就是$（document）.ready（）的作用。

但为什么不用css隐藏div呢？像这样：

<style type="text/css">
    #HideDiv
    {
        display: none;
    }
</style>

JQuery Document.ready功能在页面启动时闪烁

3 个答案: