第一段引用上面的摘要：
本文旨在解决在网页中通过点击不同链接来控制多个图像元素显示的问题。通过修改 JavaScript 代码中的 showElement 函数，使用 classList.toggle 方法，可以实现点击链接切换对应图像元素的显示与隐藏。本文将提供详细的代码示例和解释，帮助开发者轻松实现这一功能。
问题分析
问题的核心在于，当点击多个链接时，希望能够分别控制对应的图像元素的显示和隐藏。原始代码的问题在于，它使用 classList.add("show")，这只会添加 show 类，而不会移除它，导致元素只能显示一次，无法再次隐藏。
解决方案：使用 classList.toggle
classList.toggle("show") 方法可以方便地切换元素的 show 类。如果元素已经有 show 类，则移除它；如果没有，则添加它。这样，每次点击链接，图像元素的显示状态就会切换。
立即学习“Java免费学习笔记（深入）”；
代码示例
以下是修改后的 HTML, CSS 和 JavaScript 代码：
HTML:
<a class="toggler1" href="#">
<h1 class="website-titles">A boring website</h1>
</a>
<a class="toggler2" href="#">
<h1 class="website-titles">Unoriginal.co.uk</h1>
</a>
<a class="mydiv1" href="main.html">
<div class="pop-up-1">
<img class="mydiv1-bg" src="images/pink-pop-up.png" alt="pink pop up" />
<img class="mydiv1-gif" src="images/spinning-star.gif" alt="animated star gif" />
</div>
</a>
<a class="mydiv2" href="main.html">
<div class="pop-up-2">
<img class="mydiv2-bg" src="images/black-pop-up.png" alt="black pop up" />
<img class="mydiv2-gif" src="images/stars.gif" alt="animated star background" />
<h1 class="mydiv2-text">
CLICK HERE TO RE-INVIGORATE YOUR WEB SURFING EXPERIENCE!!!
</h1>
</div>
</a>CSS:
/* POP UP 1 */
.mydiv1 {
display: none;
}
.mydiv1.show {
display: block;
}
/* POP UP 2 */
.mydiv2 {
display: none;
}
.mydiv2.show {
display: block;
}JavaScript:
// Link 1
var elementToClick1 = document.querySelector(".toggler1");
var elementToShow1 = document.querySelector(".mydiv1");
if (elementToClick1) {
elementToClick1.addEventListener("click", showElement1);
}
function showElement1() {
elementToShow1.classList.toggle("show");
}
// Link 2
var elementToClick2 = document.querySelector(".toggler2");
var elementToShow2 = document.querySelector(".mydiv2");
if (elementToClick2) {
elementToClick2.addEventListener("click", showElement2);
}
function showElement2() {
elementToShow2.classList.toggle("show");
}代码解释
- HTML: 定义了两个链接（.toggler1 和 .toggler2）和两个图像元素（.mydiv1 和 .mydiv2）。
- CSS: 默认情况下，图像元素是隐藏的（display: none;）。当图像元素有 show 类时，会显示出来（display: block;）。
-
JavaScript:
- 使用 document.querySelector 获取链接和图像元素的引用。
- 为每个链接添加 click 事件监听器。
- showElement 函数使用 classList.toggle("show") 来切换图像元素的显示状态。
注意事项
- 确保 CSS 中定义了 .show 类的样式，以控制元素的显示。
- 可以使用循环来简化 JavaScript 代码，尤其是在有大量链接和图像元素的情况下。
- 如果需要更复杂的交互，例如动画效果，可以考虑使用 CSS 过渡或动画。
总结
通过使用 classList.toggle 方法，可以轻松实现点击链接切换图像元素显示的功能。这种方法简单易懂，适用于各种需要动态控制元素显示的应用场景。
