Question

<script type="text/javascript">
function hide4d()
{
document.getElementById('4d_div').style.display = 'none';
}
</script>

我的隐藏div代码有什么问题，我试着隐藏这个

<div id="4d_div">
some content
some inner div , some inner div close

</div>

我在我的标签上做了这个

<body onLoad="hide4d();">

当我的页面加载时没有任何反应..我只是想使用javascript默认隐藏div，稍后用一个按钮取消隐藏它。

jsfiddle

编辑：

我在

上有这个

<script type="text/javascript">
document.getElementById('4d_div').style.display = 'none';
</script>
</head>

但4d_div仍未被隐藏。如果我改成小提琴中的nowrap似乎工作正常

奇怪的是

我用chrome检查元素，显示：无;已添加，但我没有在那里添加关闭标记

我的代码就像

<div id="4d_div">

<tr><td>&nbsp;&nbsp;</td></tr>

<div id="big_rate_div" class="form-group">
<tr><td width="25%">
<label for="big_rate">Big Rate</label>
</td><td>
<b>1.60</b>
</td></tr>
</div>

<tr><td>&nbsp;&nbsp;</td></tr>

<div id="small_rate_div" class="form-group">
<tr><td width="25%">
<label for="big_rate">Small Rate</label>
</td><td>
<b>0.70</b>
</td></tr>
</div>

<tr><td>&nbsp;&nbsp;</td></tr>

<div id="rebate"  class="form-group">
<tr><td width="25%">
<label for="rebate">Rebate</label>
</td><td>
<table>
<tr><td width="30%">
<input type="text" class="form-control" id="ticket_rebate" placeholder="">
</td><td>%</td>
</tr></table>
</td>
</tr>
</div>

<tr><td>&nbsp;&nbsp;</td></tr>

<div id="commission"  class="form-group">
<tr><td width="25%">
<label for="commission">Commission</label>
</td><td>
<table>
<tr><td width="30%">
<input type="text" class="form-control" id="commission" placeholder="">
</td>
<td>%</td>
</tr></table>
</td>
</tr>
</div>

</div>

我的4d_div假设在最后一个标签处结束，但是当我的页面加载时，4d_div似乎是个人的

它打开后立即关闭，里面的div都是自己包裹。

我的代码是否有任何部分让我的div无法包装其他4个div，big_rate_div，small_rate_div，回扣和佣金

Picture Link of the issue

Answer 1

您的小提琴不起作用，因为您已选择在侧栏中运行代码“onLoad”。这为您的函数定义创建了一个新范围，因此<body>标记的调用因此而失败（查看控制台 - F12以查看错误消息）。

更改侧边栏选项以改为在头部中运行，这会使您的功能处于全局范围内。

Updated working fiddle

如果您在jsFiddle之外的页面上遇到同样的问题，那么请验证函数定义是否存在且它是否在全局范围内（意味着不包含在任何其他函数或闭包中）。使用控制台进行调试。

修改后：

现在你已经失去了这个功能，只是试图设置风格。在这种情况下，您需要将JavaScript移动到页面的末尾，或者使用DOM ready包装器。这样做的原因是在JavaScript尝试访问它时，div尚未在DOM中准备就绪。例如：

window.onload = function(){
    document.getElementById('4d_div').style.display = 'none';
};

Answer 2

您可能希望将div的初始样式设置为“display：none”，因此默认情况下隐藏它。然后创建一个按钮单击处理程序，它将显示div。

Answer 3

你可以尝试这样的事情：

$(document).ready(function() {
            $('#4d_div').hide();
            $('#yourbuttonIDhere').on('click', function() {
                            $('#4d_div').show();
            }
        });

Answer 4

我认为问题出在div的名称中，以4开头的数字开头。它应该从字符$或下划线开始。

Javascript隐藏DIV

4 个答案: