使用 Javascript 将 HTML 页面中的默认可见性从可见更改为隐藏

Change Default Visibility in HTML page from Visible to Hidden using Javascript

本文关键字：隐藏 可见性 默认 HTML Javascript 使用      更新时间：2023-09-26

我从以下网站复制了这段代码（这是评论前的最后一个示例）

我有一个带有链接的网页，这些链接将在页面上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>

在 html 中的div 中分配样式显示：没有这样的。

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

如果你能避免内联事件会更好，你可以使用 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>

相关文章：