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

Question

我正在寻找一种方法来切换三个堆叠的div的按钮将按钮触发一个onclick函数，使该特定的div可见和隐藏其他。我已经在下面包含了一个jsfiddle，我现在对此有任何帮助的代码将会很棒！

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

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

JSFiddle

Answer 1

你可以通过你要显示的功能，使用一个CSS类切换display: none/block的ID，拨动元素在该类你点击和隐藏剩下的通过删除课程。

.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 
    } 
} 

如果没有默认的活动项目，您可以在数组中添加“inner-dung”。如果你这样做，“非活动”数组将首次收到“未定义”数据，但它不会妨碍目的。

当然你不必使用for循环，但如果你有更多的项目，你会。