javascript - 显示一个隐藏的 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>