显示一个隐藏的div，同时使另一个隐藏

Question

我正在寻找一种方法来切换三个堆叠的div，其中按下按钮将触发onclick函数，以使该特定div可见并隐藏其他div。 我在下面的代码中包含了一个jsfiddle，我目前对此有所帮助！

  function togglediv(id1, id2, id3) { var idOne = document.getElementById(id1); var idTwo = document.getElementById(id2); var idThree = document.getElementById(id3); idOne.style.display = idOne.style.display == "block" ? "none" : "block"; idTwo.style.display = idTwo.style.display == "none"; idThree.style.display = idThree.style.display == "none"; } 

  <div class="table-responsive"> <button type="button" class="btn btn-primary" onclick="togglediv('inner-dung', 'inner-boss', 'inner-item')"> Dungeon </button> <button type="button" class="btn btn-primary" onclick="togglediv('inner-boss', 'inner-dung', 'inner-item')"> Boss </button> <button type="button" class="btn btn-primary" onclick="togglediv('inner-item', 'inner-dung', 'inner-boss')"> Item </button> </div> <div id="search-dung"> <div id="inner-dung"> DUNGEON </div> <div id="inner-boss"> BOSS </div> <div id="inner-item"> ITEM </div> </div> 

JSFiddle

Answer 1

您可以将要显示的ID传递给函数，使用CSS类切换display: none/block ，在您单击的元素上切换该类，并通过删除该类隐藏其余部分。

 .table-responsive { margin: 0px auto; width: 90%; } #search-dung { margin: 0px auto; width: 90%; height: 50%; background-color: white; border: 1px solid red; } #inner-dung, #inner-item, #inner-boss { position: absolute; margin: 0px auto; width: 90%; height: 50%; background-color: white; border: 1px solid red; display: none; } #inner-dung.show, #inner-item.show, #inner-boss.show { display: block; } 

 <div class="table-responsive"> <button type="button" onclick="togglediv('inner-dung')"> Dungeon </button> <button type="button" onclick="togglediv('inner-boss')"> Boss </button> <button type="button" onclick="togglediv('inner-item')"> Item </button> </div> <div id="search-dung"> <div id="inner-dung"> DUNGEON </div> <div id="inner-boss"> BOSS </div> <div id="inner-item"> ITEM </div> </div> <script> var els = document.getElementById('search-dung').getElementsByTagName('div'); function togglediv(id) { var el = document.getElementById(id); for (var i = 0; i < els.length; i++) { var cur = els[i]; if (cur.id == id) { cur.classList.toggle('show') } else { cur.classList.remove('show'); } } } </script> 

Answer 2

function togglediv(id1, id2, id3) {
    var idOne = document.getElementById(id1);
    var idTwo = document.getElementById(id2);
    var idThree = document.getElementById(id3);
    idOne.style.display = "block";
    idTwo.style.display = "none";
    idThree.style.display = "none";
}

https://codepen.io/anon/pen/NjOpJw

Answer 3

“教育好你的孩子”

将规则应用于父母以影响孩子。

 document.querySelector( "form" ).addEventListener( "click", function( evt ) { var n = evt.target.name; if ( n ) { document.querySelector( "#foobarbaz" ).setAttribute( "class", n ); } }, false ); 

 #foo, #bar, #baz { display: none; } #foobarbaz.foo #foo, #foobarbaz.bar #bar, #foobarbaz.baz #baz { display: block; } 

 <div id="foobarbaz" class="foo"> <div id="foo">Foo!</div> <div id="bar">Bar?</div> <div id="baz">Baz.</div> </div> <form> <input type="button" value="Foo" name="foo"> <input type="button" value="Bar" name="bar"> <input type="button" value="Baz" name="baz"> </form> 

Answer 4

那里有几个问题。

1. 使用onClick而不是onclick

2. idOne.style.display = idOne.style.display ==“阻止”？ “ none”：“ block”; 将返回一个布尔值，因此您应该为此更改它

    idOne.style.display = "block"; 

3. 设置您的JavaScript以加载到正文中。

这是一个工作版本

https://jsfiddle.net/83qwrk70/1/

Answer 5

您可以使用切换用例，仅传递要在切换div中显示的元素

//index.html
<button type="button" class="btn btn-primary" onclick="togglediv('inner-dung')">
          Dungeon
</button>
<button type="button" class="btn btn-primary" onclick="togglediv('inner-boss')">
          Boss</button>   
<button type="button" class="btn btn-primary" onclick="togglediv('inner-item')">
          Item </button>  

//index.js
function show(el) {
    el.style.display = 'block';
}

function hide(el) {
    el.style.display = 'none';
}

function togglediv(selected) {
    var idOne = document.getElementById('inner-dung');
    var idTwo = document.getElementById('inner-boss');
    var idThree = document.getElementById('inner-item');
    switch(selected) {
        case 'inner-dung': {
            show(idOne);
            hide(idTwo);
            hide(idThree);
            break;
        }
        case 'inner-boss': {
            hide(idOne);
            show(idTwo);
            hide(idThree);
            break;
        }
        case 'inner-item': {
            hide(idOne);
            hide(idTwo);
            show(idThree);
            break;
        }
    }

}

Answer 6

这是另一个可扩展的选项：

var active = "inner-dung",
    inactive = ["inner-boss", "inner-item"];

var toggleDiv = function (id) {
    active = inactive.splice(inactive.indexOf(id), 1, active);
    document.getElementById(active).style.display = "block"; // or use style sheet
    for (var i = 0; i < inactive.length; i++) {
        document.getElementById(inactive[i]).style.display  = "none"; // or use style sheet
    }
}

如果没有默认的活动项目，则也可以在阵列中放入“内粪”。 如果这样做，“非活动”数组将在第一次接收到“未定义”，但不会妨碍目的。

当然，您不必使用for循环，但是如果您有更多项目，则可以。