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では としてではclassなく として宣言する必要があります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 に答える