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

Question

我正在寻找一种方法来切换三个堆叠的div，其中按下按钮将触发onclick功能以使特定div可见并隐藏其他div。我已经在下面添加了一个jsfiddle以及我目前对此有任何帮助的代码，这将是惊人的！

＆＃13;

＆＃13;

	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";
    			}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃34;教好孩子＆＃34;

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

＆＃13;

＆＃13;

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

＆＃13;

#foo,
#bar,
#baz {
    display: none;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

那里有几个问题。

1. 使用onClick而不是onclick

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

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

如果没有默认的活动项目，您可以将＆＃34; inner-dung＆＃34;在数组中也是如此。如果你这样做，那么＆＃34;不活跃＆＃34;数组将收到＆＃34; undefined＆＃34;第一次，但它不会妨碍目的。

当然，你不必使用for循环，但如果你有更多的东西，你可以。