<div class="parent">
<div class="child" id="child-A">
<div class="child" id="child-B">
<div class="child" id="child-C">
</ div>
所以這個想法是，最初，child-A將在頂部，這意味著child-B并且child-C不會被看到，因為它們將在底部，被child-A.
所以會有一個切換來縮小每個孩子的寬度來設定誰是可見的，誰是隱藏的。
uj5u.com熱心網友回復：
const checkboxes = document.querySelectorAll( 'input[type=checkbox]' );
var myFunction = function( event ) {
var attribute = event.target.getAttribute("data-target");
var element = document.getElementById(attribute);
if (element.style.display === "none")
element.style.display = "block";
else
element.style.display = "none";
};
for (var i = 0; i < checkboxes.length; i ) {
checkboxes[i].addEventListener('change', myFunction, false);
}.child{
width:200px;
height:200px;
position:absolute;
}
#child-A{
background:red;
z-index:100;
}
#child-B{
background:blue;
z-index:99;
}
#child-C{
background:yellow;
z-index:98;
}
#controls{
margin-left: 210px;
}<div class="parent">
<div class="child" id="child-A"></div>
<div class="child" id="child-B"></div>
<div class="child" id="child-C"></div>
</div>
<div id="controls">
<label><input type="checkbox" data-target="child-A" checked/> Child A </label> <br>
<label><input type="checkbox" data-target="child-B" checked/> Child B </label> <br>
<label><input type="checkbox" data-target="child-C" checked/> Child C </label> <br>
</div>uj5u.com熱心網友回復：
您可以通過使用 cssposition和來實作您的目標z-index，并且為了切換活動狀態，您可以通過 JS 改變專案的類。下面是一個簡單的例子，通過點擊黑色區域，活動將被改變。
let i = 0;
const children = document.querySelectorAll('.child');
function toggleDiv() {
children[i].classList.remove('active');
i = (i 1) % 3; //since we have 3 child
children[i].classList.add('active');
}.child {
position: absolute;
height: 100px;
width: 100px;
font-size: 20px;
background: black;
color: white;
}
.child.active {
z-index: 1;
}<div class="parent" onClick="toggleDiv()">
<div class="child active" id="child-A">child-A</div>
<div class="child" id="child-B">child-B</div>
<div class="child" id="child-C">child-C</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/378032.html
標籤：javascript html css 反应