Onclick、hover 和 div 切换

Question

我在让这段代码运行时遇到问题。 我在下面的代码中的目标是让卡片在鼠标悬停在卡片上时翻转，并在单击时保持不变。 如果单击另一张卡片，则正面朝上的卡片（如果存在）将翻转回正面朝下。 一直以来，单击任何卡片都会切换下面一组 div 的外观。 我无法让卡片保持正面朝上，我不确定为什么。

不确定我是否解释得很好，但如有任何帮助，我们将不胜感激！

 var divs = ["Div1", "Div2", "Div3", "Div4"]; var visibleDivId = null; function divVisibility(divId) { if (visibleDivId === divId) { visibleDivId = null; } else { visibleDivId = divId; } hideNonVisibleDivs(); } function hideNonVisibleDivs() { var i, divId, div; for (i = 0; i < divs.length; i++) { divId = divs[i]; div = document.getElementById(divId); if (visibleDivId === divId) { div.style.display = "block"; } else { div.style.display = "none"; } } }

 .buttons a { width: 15%; height: 195px; position: relative; display: inline-block; margin: 10px; }.buttons.img-top { display: none; position: absolute; top: 0; left: 0; z-index: 99; }.buttons a:hover.img-top { display: inline; }

 <div class="main_div"> <div class="buttons"> <a href="#" onclick="divVisibility('Div1'); return false;"> <img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg" class="img-top" alt="Card Front"> </a> | <a href="#" onclick="divVisibility('Div2'); return false;"><img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg" class="img-top" alt="Card Front"></a> | <a href="#" onclick="divVisibility('Div3'); return false;"><img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg" class="img-top" alt="Card Front"></a> | <a href="#" onclick="divVisibility('Div4'); return false;"><img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg" class="img-top" alt="Card Front"></a> </div> <div class="inner_div"> <div id="Div1">I'm Div One</div> <div id="Div2" style="display: none;">I'm Div Two</div> <div id="Div3" style="display: none;">I'm Div Three</div> <div id="Div4" style="display: none;">I'm Div Four</div> </div> </div>

Answer 1

您需要 select 活动卡才能保持面朝上。 然后在未选中时隐藏非活动卡片。

 var divs = ["Div1", "Div2", "Div3", "Div4"]; var visibleDivId = null; function divVisibility(divId, anchor) { if (visibleDivId === divId) { visibleDivId = null; } else { visibleDivId = divId; } let prevClass = anchor.className; let buttons = document.getElementById('buttons'); for(let i = 0; i < buttons.children.length; i++) { buttons.children[i].className = ''; } if(prevClass == '') { anchor.className = 'active'; } else { anchor.className = ''; } hideNonVisibleDivs(); } function hideNonVisibleDivs() { var i, divId, div; for (i = 0; i < divs.length; i++) { divId = divs[i]; div = document.getElementById(divId); div.className = ''; if (visibleDivId === divId) { div.style.display = "block"; } else { div.style.display = "none"; } } }

 .buttons a { width: 15%; height: 195px; position: relative; display: inline-block; margin: 10px; }.buttons.img-top { display: none; position: absolute; top: 0; left: 0; z-index: 99; }.buttons a:hover.img-top { display: inline; }.buttons a.active.img-top { display: inline; }

 <div class="main_div"> <div class="buttons" id="buttons"> <a href="#" onclick="divVisibility('Div1', this); return false;"> <img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg" class="img-top" alt="Card Front"> </a> | <a href="#" onclick="divVisibility('Div2', this); return false;"><img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg" class="img-top" alt="Card Front"></a> | <a href="#" onclick="divVisibility('Div3', this); return false;"><img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg" class="img-top" alt="Card Front"></a> | <a href="#" onclick="divVisibility('Div4', this); return false;"><img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg" class="img-top" alt="Card Front"></a> </div> <div class="inner_div"> <div id="Div1">I'm Div One</div> <div id="Div2" style="display: none;">I'm Div Two</div> <div id="Div3" style="display: none;">I'm Div Three</div> <div id="Div4" style="display: none;">I'm Div Four</div> </div> </div>