顯示隱藏的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循環，但如果你有更多的項目，你會。