Question

我想在隐藏div 2的同时显示html上的div 1，然后使用onclick我想交换它们的可见性，如单击按钮hide div1然后显示div2，然后再次单击时，隐藏div2然后显示div1。这是我的代码：

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'none')
          e.style.display = 'block';
       else
          e.style.display = 'none';
    }

<a href="#" onclick="toggle_visibility('foo');">Hide DIV 1 show DIV 2</a>
<div id="foo"> This is  DIV 1</div></div>
<div id="foo"> This is  DIV 2</div></div>

Answer 1

最初设定div1到display:none;，并简单地切换它们。我已经使用类targetElement来摆脱通用选择器。 hidden类用于使用默认的style display:none;并替换inline-style。

竟被我喜欢用button，而不是<a href="#">Click here</a>。为此，您可以用<button type="button"> Button Name </button>

替换标签

$('#toggleButton').on('click',function(){
 $('.targetElement').toggleClass('hidden');
});

.hidden{
  display:none;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="toggleButton" href="#">Click here</a>
<div id="foo" class="targetElement hidden"> This is  DIV 1</div></div>
<div id="foo" class="targetElement"> This is  DIV 2</div></div>

Answer 2

拥有两个具有相同ID的元素不是一个好习惯。 ID应该始终是唯一的。改用类。隐藏div onload。只需将CSS添加到style属性中的html元素中即可。你也有不必要的</div>的标签，我除去。

下面正在使用JQuery代码（更少的代码）：

$("#toggle").on("click", function() {
  $(".isToggable").toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="toggle" href="#" >Hide DIV 1 show DIV 2</a>
  <div class="isToggable"> This is DIV 1</div>
  <div class="isToggable" style="display:none"> This is DIV 2</div>

在html中，我向要切换的元素添加了类。我还添加的ID到a标签。在我的JQuery使用它的ID添加一个事件监听器的onclick上a标签。 $(".isToggable").toggle();使用页面中所有具有“ isToggable”类的元素来切换其可见性。

使用任何参数，则.toggle（）方法简单地切换元素的可见性

有关切换的更多信息：JQuery Toggle

旧答案（香草javascript）

function toggle_visibility(id) {
  var container = document.getElementById(id);

  for (var i = 0; i < container.children.length; i++) {
    let currentElem = container.children[i];
    if (currentElem.style.display === "none") {
      currentElem.style.display = "block";
    } else {
      currentElem.style.display = "none";
    }
  }
}

<a href="#" onclick="toggle_visibility('container');">Hide DIV 1 show DIV 2</a>
<div id="container">
  <div> This is DIV 1</div>
  <div style="display:none"> This is DIV 2</div>
</div>

这是如何工作的是你把你的要素，你要切换的容器和toggle_visibility功能将切换内部元素的所有能见度内的知名度。这样，如果您决定添加更多的div，则将全部处理。

如果你对此是如何工作的任何问题。不要犹豫了。希望对您有帮助！

Answer 3

属性id在文档中必须是唯一的。请改用class。

首先使用CSS以隐藏第二个div。然后使用forEach()隐藏/显示DIV。你也应该避免使用内联事件处理程序。

尝试以下方式：

document.querySelector('a').addEventListener('click',function(){
  [].forEach.call(document.querySelectorAll('.foo'), function(el){
    if(el.style.display == 'none')
        el.style.display = 'block';
     else
        el.style.display = 'none';
  });
});

<a href="#">Hide DIV 1 show DIV 2</a>
<div class="foo"> This is  DIV 1</div></div>
<div class="foo" style="display:none;"> This is  DIV 2</div></div>

如何隐藏div，然后使用toggle_visibility在单击时显示另一个div

3 个答案:

旧答案（香草javascript）