Question

我试图隐藏并只需点击一下即可显示两个div。

<a href="javascript:showhide('bbb','ccc4')">
    you click here to see two div contents </a>sddsds<br />
</a>

我只能隐藏并显示一个div。当我试图隐藏并显示两个div时，使用ID，我无法做到。我已尝试过其他一些建议，但它们不起作用。

<a href="javascript:showhide('bbb','ccc4')">
    you click here to see two div contents </a>sddsds<br />
</a>

<div target='ccc4' name='ccc4'  id='ccc4' frameborder='0'onload='setIframeHeight(this.id)'   style='display:none;'  ' > ddfddddd

    <iframe class='shark'  src='imagehugeblow.php?midd=<?=$row5['mid'] ?>ccc' target='ccc' name='ccc'  id='ccc' frameborder='0'onload='setIframeHeight(this.id)'     style='display:none;'              ></iframe>

</div> <div target='bbb' name='bbb'  id='bbb' frameborder='0'onload='setIframeHeight(this.id)'   style='display:none;'  ' > sdds

    <iframe class='shark'  src='imagehugeblow.php?midd=<?=$row5['mid'] ?>ccc' target='bbb' name='bbb'  id='bbb' frameborder='0'onload='setIframeHeight(this.id)'     style='display:none;'              ></iframe>

</div>
<script type="text/javascript">
  function showhide(id) {
    var e = document.getElementById(id);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
  }
</script>

我尝试过使用下面的Javascript，但它也没有用。

<script type="text/javascript">
    function toggle_visibility() {
        for (var i = 0, len = arguments.length; i < e; i++) {
            var e = document.getElementById(arguments[i]).style,d = e.display;
            e.display = (d == "block") ? "none" : "block";
        }
    } 
</script>

有没有办法一键隐藏多个div，或者我必须使用class而不是使用ID吗？

Answer 1

function showhide(id) {
    var e = document.getElementById(id);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}

这里只处理一个ID。

重新启动您的功能以隐藏两个ID。这样的事情：

function showhide(id1, id2) {
    var e = document.getElementById(id1);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
    e = document.getElementById(id2);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}

要减少代码复制，请使用数组来存储ID：

function showhide(ids) {
    for (var i = 0; i < ids.length; i++) {
        var e = document.getElementById(ids[i]);
        e.style.display = (e.style.display == 'block') ? 'none' : 'block';
    }
}

并称之为：

showhide(['bbb', 'ccc4'])

或者您可以使用arguments：

function showhide() {
    for (var i = 0; i < arguments.length; i++) {
        var e = document.getElementById(arguments[i]);
        e.style.display = (e.style.display == 'block') ? 'none' : 'block';
    }
}

在这种情况下，电话应该是：

showhide('bbb', 'ccc4')

Answer 2

将您想要切换显示的每个div添加为单独的参数：

<a href="javascript:showhide('bbb', 'ccc4')">

然后更改你的JS以在arguments数组中包含一个循环：

<script type="text/javascript">
  function showhide() {
    for(var i = 0; i < arguments.length; i++){
      var e = document.getElementById(arguments[i]);
      e.style.display = (e.style.display == 'block') ? 'none' : 'block';
    }
  }
</script>

Answer 3

我的版本

window.onload=function() {
  document.getElementById("ccc4").style.display="none";
  document.getElementById("bbb").style.display="none";
  document.getElementById("toggle").onclick=function() {
    var divs = this.getAttribute("data-divs").split(",");
   
    for(var i = 0,len = divs.length;i < len;i++){
      var e = document.getElementById(divs[i]).style;
      console.log(e.display)
      e.display = (e.display == "") ? "none" : "";
    }
    return false;
  }
}

<a href="turnonjs.html" id="toggle" data-divs="ccc4,bbb">
    you click here to see two div contents </a>


<div target='ccc4' name='ccc4'  id='ccc4'>div 1</div> 
<div target='bbb' name='bbb'  id='bbb'> div 2</div>

或者给两个div都是同一个类并使用document.querySelectorAll(".classname")

Answer 4

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript">
    function toggle_visibility(id) 
    {var e = document.getElementById(id);
    if(e.style.display == 'block')e.style.display = 'none'; 
    else e.style.display = 'block'; }
</script>

<a onclick="toggle_visibility('div-to-hide');">

<div id="div-to-hide" class="div-to-hide">
---- content here ---
</div>

只需单击一下即可隐藏和显示多个div

4 个答案: