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

【问题标题】：Change Default Visibility in HTML page from Visible to Hidden using Javascript使用 Javascript 将 HTML 页面中的默认可见性从可见更改为隐藏
【发布时间】：2016-04-28 06:52:54
【问题描述】：

我从下面的website复制了这段代码（这是cmets之前的最后一个例子）

我有一个网页，其中包含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>

【问题讨论】：

标签： javascript jquery html arrays

【解决方案1】：

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

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

【讨论】：

完美谢谢！我以为我必须编辑 Javascript，但答案在 html 中。

【解决方案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>

【讨论】：

你这个，看起来干净多了。 “John/Jane Doe”按钮的一项附加功能是它们会显示/隐藏自己以及彼此。它基本上是一个切换按钮。简可以隐藏当时出现的约翰或简，反之亦然。
完成，使用toggle() 函数和:not 选择器检查我的更新。