Question

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

我的网页上包含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

在html assign style中你的div显示：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>

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

2 个答案: