代表id，你应该使用.newboxes {display：none;自从。将获得所有课程。

Question

出于某种原因，我无法默认隐藏此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>

JS

<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;
}

2 个答案:

答案 0 :(得分：1)

答案 1 :(得分：0)

Answer 1

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

首先应该改变这个：

#newboxes {
    display:none;
}

进入这个：

.newboxes {
    display:none;
}

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

Answer 2

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

代表id，你应该使用.newboxes {display：none;自从。将获得所有课程。

默认情况下，在页面加载时隐藏所有div，显示：none似乎不起作用

2 个答案:

代表id，你应该使用.newboxes {display：none;自从。将获得所有课程。