使用Javascript將HTML頁面中的默認可見性從Visible更改為Hidden

Question

我從以下網站復制了這段代碼（這是評論前的最后一個例子）

我有一個網頁，其中包含將在頁面上show/hide隱藏文字的鏈接。 一切都運行良好的功能，但隱藏的文本開始在頁面加載時可見。 我需要在腳本中進行哪些更改才能以隱藏的方式啟動。 我為命名慣例道歉，而不是最好的......

JS：

function showonlyonev2(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
      for(var x=0; x<newboxes.length; x++) {
            name = newboxes[x].getAttribute("class");
            if (name == 'newboxes-2') {
                  if (newboxes[x].id == thechosenone) {
                        if (newboxes[x].style.display == 'block') {
                              newboxes[x].style.display = 'none';
                        }
                        else {
                              newboxes[x].style.display = 'block';
                        }
                  }else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}

HTML：

<li>
   <a id="myHeader1-2" href="javascript:showonlyonev2('newboxes1-2');"> John Doe</a>
</li>
<li>
   <a id="myHeader2-2" href="javascript:showonlyonev2('newboxes2-2');">Jane Doe</a>
</li>

<div class="newboxes-2" id="newboxes1-2">
   <p>Phone Number1</p>
</div>
<div class="newboxes-2" id="newboxes2-2">
   <p>Phone Number2</p>
</div>

Answer 1

在你的div中，html assign style顯示：none就像這樣。

<div class="newboxes-n" style="display: none;">

Answer 2

如果你想避免內聯事件會更好，你可以使用jQuery的強大功能並通過簡單的代碼實現它，請查看下面的示例。

希望這可以幫助。

---

 $('body').on('click', 'li a', function(){ var target_id = '#'+$(this).data('target'); $('.newboxes-2:not('+target_id+')').hide(); //Hide all divs except the target $(target_id).toggle(); //Show/hide related one in every click }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li> <a id="myHeader1-2" data-target="newboxes1-2" href="#"> John Doe</a> </li> <li> <a id="myHeader2-2" data-target="newboxes2-2" href="#">Jane Doe</a> </li> the hidden text: <div class="newboxes-2" id="newboxes1-2" style="display:none"> <p>Phone Number1</p> </div> <div class="newboxes-2 hidden" id="newboxes2-2" style="display:none"> <p>Phone Number2</p> </div>