Question

我有一个带有一些数据绑定控件的aspx页面。其中一个是复选框。如果选中此复选框，则应显示div，否则将其隐藏。单击/取消选中该框时效果很好。但是，当页面最初加载时，div总是显示，直到我选中/取消选中该复选框。我如何解决这个问题，以便如果未选中数据绑定复选框，那么当页面加载时div被隐藏了？

<script type="text/javascript">
   function hideDiv(obj) {
        if (obj.checked == true) {
            document.getElementById("divHome").style.display = 'block';
        }
        else {
            document.getElementById("divHome").style.display = 'none';

        }
    }
</script>
<asp:CheckBox ID="cbMycb" runat="server" ClientIDMode="Static" onClick="hideDiv(this);"
    Checked='<%# Bind("MyField") %>' />
<br />
<div id='divHome'>
        STUFF INSIDE THE DIV
</div>

Answer 1

您可以在加载内容时运行hideDiv函数，如Amit Joki所述。

    window.onload =function(){
    hideDiv(document.getElementById('cbMycb'));

但是，这个解决方案可能会出现一些问题，如果div可见，您可能会在页面加载时看到div闪烁。要解决它，只需通过添加一些css样式确保div不可见...

#divHome{
    display: none;
}

另一种方法是使用条件数据绑定表达式来设置div的可见性......

<div id='divHome' style='<%# "display:" +  ((bool)Eval("MyField") ? "block" : "none") %>'>
        STUFF INSIDE THE DIV
</div>

希望有所帮助

Answer 2

只需在外面拨打您的电话。

<script type="text/javascript">
   function hideDiv(obj) {
        if (obj.checked == true) {
            document.getElementById("divHome").style.display = 'block';
        }
        else {
            document.getElementById("divHome").style.display = 'none';

        }
    }
    window.onload =function(){
        hideDiv(document.getElementById('cbMycb'));
    }
</script>

强制javascript在aspx页面加载上运行

2 个答案: