0

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

2 回答 2

1

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

你应该从改变这个开始：

#newboxes {
    display:none;
}

进入这个：

.newboxes {
    display:none;
}

您还需要display: block;从newboxes1.

于 2013-10-18T10:10:28.143 回答
0

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

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

于 2013-10-18T10:12:27.620 回答