Question

尝试隐藏所有可见的div并切换一个单击按钮。

<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 class="stream" style="display:none">
<center>
<iframe src="http://www.twitch.tv/g4ivl3_0v3r/embed" frameborder="0" scrolling="yes" height="700px" width="65%"></iframe>
<br>
<iframe src="http://www.twitch.tv/g4ivl3_0v3r/chat?popout=" frameborder="0" scrolling="yes" height="300" width="65%"></iframe>
</center>
</div>

切换按钮下的

：

<img src="images/twitch.png"
  width="20%" height="20%" border="0" onclick="toggle_visibility('stream')">

所以我只是想知道我目前使用的是否可以隐藏页面上的所有其他div并只切换一个或两个。现在上面的工作正常，可以移动我的桌子并显示我想要的div但最后我喜欢隐藏它除了流div之外的所有内容。

另外，我对此有点新意，因为我相信你可以告诉我，但我正在努力学习我的能力。任何帮助深表感谢。

Answer 1

你可以这样做：

$('div').hide();// hide all divs

$("#stream").show();// here show the div with id stream

如果你想用类流显示所有div，请使用下面的内容。

$(".stream").show();// here show the div with class stream

Answer 2

尝试......

$("div:visible").hide();

...隐藏所有可见的DIV。然后，打开那个不应该被隐藏的那个......

$(".stream").show();

Answer 3

$(document).ready(function(){
  $("#button_id").click(function(){
     $('div').hide(); //this will hide all the div(s) firstly
     $("#stream").show();
   });
});

Answer 4

试试这个

$(document).ready(function(){
  $("#selector").click(function(){
     $('div').hide(); //this will hide all the div
     $("#stream").show(); 
   });
});

Answer 5

如果你真的不想使用jQuery，请尝试：

function toggle(elem, collection) {
    var shown = (elem.style.display === 'block');

    for (i = 0; i < collection.length; i++) {
        if (!shown) {
            collection[i].style.display = 'none';
        } else {
            collection[i].style.display = '';
        }
    }

    if (shown) {
        elem.style.display = '';
    } else {
        elem.style.display = 'block';
    }
}

toggle(document.getElementById('stream'), document.getElementsByTagName('div'));

假设使用CSS而不是内联样式将#stream设置为display: none;。否则，请将''更改为'none'。

隐藏多个div onclick

5 个答案: