【问题标题】：Hide all divs by default on pageload, display:none doesn't appear to work在页面加载时默认隐藏所有 div，display:none 似乎不起作用
【发布时间】：2013-10-18 09:51:02
【问题描述】：

由于某种原因，我无法默认隐藏此 div。我希望页面被加载并且在用户单击 3 个链接之一之前不可见 div 但是默认情况下第一个 div 'newboxes1' 始终可见。

div id id 'newboxes' 和类告诉 'newboxes' 到 'display:none' 所以我不明白为什么它不起作用。

HTML

<div style="background-color: #ffffff; padding: 5px; width: 100px;">
        <a id="myHeader1" href="javascript:showonlyone('newboxes1');" ><strong>1</strong>    </a>
     </div>
<div class="newboxes" id="newboxes1" style="background-color: #ffffff; display: block;padding: 5px; width: 426px; margin-left:6px; background-color:#f4f2f2;">
     <img src="" width="241" height="36">
  <p class="intro">title</p><br>
  <p>text here<br><br>
  <a href=""><img src="" alt="" width="200" height="31" style="float:left;"> </a>
  <a href=""><img class="reg_box" src="" alt="" width="200" height="31"></a><br>
</div>

     <div style="background-color: #ffffff; padding: 5px; width: 240px;">
        <a id="myHeader3" href="javascript:showonlyone('newboxes3');" ><strong>2</strong>   </a>
     </div>
     <div class="newboxes" id="newboxes3" style="background-color: #ffffff; display: none;padding: 5px; width: 426px; margin-left:6px;">
     <img src="" width="241" height="36">
  <p class="intro">title 2</p><br>
  <p>text here<br><br>
  <a href=""><img src="" alt="" width="200" height="31" style="float:left;"> </a>
  <a href=""><img class="reg_box" src="" alt="" width="200" height="31"></a><br>
</div>

     <div style="background-color: #ffffff; padding: 5px; width: 100px;">
        <a id="myHeader4" href="javascript:showonlyone('newboxes4');" ><strong>3</strong>  </a>
     </div>
     <div class="newboxes" id="newboxes4" style="background-color: #ffffff; display: none;padding: 5px; width: 426px; margin-left:6px;">
     <img src="" width="350" height="36">
  <p class="intro">test 3</p><br>
  <p>text here<br><br>
  <a href=""><img src="" alt="" width="200" height="31" style="float:left;"> </a>
  <a href=""><img class="reg_box" src="" alt="cis register" width="200" height="31"></a>   <br>
  </div>

<script>
function showonlyone(thechosenone) {
 $('.newboxes').each(function(index) {
        if ($(this).attr("id") == thechosenone) {
           $(this).show(200);
      }
        else {
           $(this).hide(600);
      }
 });
}
</script>

CSS

#newboxes {
display:none;
}

【问题讨论】：

我们可以测试甚至查看问题所在的任何 URI 吗？
当然是的，对不起。 jsfiddle.net/FFMRe
虽然这在 jsfiddle 中似乎不起作用

标签： javascript jquery css visibility show-hide

【解决方案1】：

newboxes 是一个类，我必须在 css 中声明为 class 而不是 id。

你应该从改变这个开始：

#newboxes {
    display:none;
}

进入这个：

.newboxes {
    display:none;
}

您还需要从 newboxes1 的内联样式中删除 display: block;。

【讨论】：

我之前已将 #newboxes 更改为 .newboxes，因为我不太确定在这种情况下哪个是正确的，但没有结果，但是从第一个元素中删除 display"block 解决了这个问题，所以现在可以工作了（我什至没有发现）谢谢

【解决方案2】：

检查您正在使用的 css 样式#newboxes { display:none; }

用于 id，你应该使用 .newboxes { display:none; } 自从。将获得所有课程。

【讨论】：

用于 id，你应该使用 .newboxes { display:none; } 自从 。将获得所有课程。

用于 id，你应该使用 .newboxes { display:none; } 自从。将获得所有课程。