JavaScript 实现点击链接显示多个元素-html教程-PHP中文网

JavaScript 实现点击链接显示多个元素

花韻仙語

发布： 2025-09-18 19:18:01

原创

547人浏览过

javascript 实现点击链接显示多个元素

本文介绍了如何使用 JavaScript 实现点击不同链接显示不同元素的功能。通过监听链接的点击事件，并使用 classList.toggle() 方法来切换元素的显示状态，可以轻松实现多个链接控制多个元素显示的功能。文章提供了详细的代码示例，包括 HTML 结构、CSS 样式和 JavaScript 代码，帮助开发者快速掌握该技巧。

实现原理

核心在于利用 JavaScript 监听链接的点击事件，并在事件处理函数中修改目标元素的 CSS 类名。通过添加或移除特定的类名，可以控制元素的显示与隐藏。classList.toggle() 方法能够方便地切换类名的存在状态，简化了代码逻辑。

HTML 结构

首先，需要定义链接和要显示/隐藏的元素。每个链接都应该有一个唯一的 class，每个要控制的元素也应该有一个唯一的 class。

<a class="toggler1" href="#">Link 1</a>
<a class="toggler2" href="#">Link 2</a>

<div class="mydiv1">Content 1</div>
<div class="mydiv2">Content 2</div>

登录后复制

CSS 样式

使用 CSS 来控制元素的初始显示状态和点击后的显示状态。通常，初始状态设置为 display: none;，点击后通过添加 show 类来改变 display 属性。

立即学习“Java免费学习笔记（深入）”；

造点AI

夸克 · 造点AI

325

查看详情

.mydiv1, .mydiv2 {
  display: none;
}

.mydiv1.show, .mydiv2.show {
  display: block;
}

登录后复制

JavaScript 代码

使用 JavaScript 来监听链接的点击事件，并在事件处理函数中切换目标元素的 show 类。

// Link 1 and Element 1
var elementToClick1 = document.querySelector(".toggler1");
var elementToShow1 = document.querySelector(".mydiv1");

if (elementToClick1) {
  elementToClick1.addEventListener("click", function(event) {
    event.preventDefault(); // Prevent the default link behavior
    elementToShow1.classList.toggle("show");
  });
}

// Link 2 and Element 2
var elementToClick2 = document.querySelector(".toggler2");
var elementToShow2 = document.querySelector(".mydiv2");

if (elementToClick2) {
  elementToClick2.addEventListener("click", function(event) {
    event.preventDefault(); // Prevent the default link behavior
    elementToShow2.classList.toggle("show");
  });
}

登录后复制

代码解释:

document.querySelector(".toggler1")：选择器选中class为 toggler1 的链接元素。
document.querySelector(".mydiv1")：选择器选中class为 mydiv1 的需要显示/隐藏的元素。
elementToClick1.addEventListener("click", ...)：为链接添加点击事件监听器。
event.preventDefault(): 阻止链接的默认跳转行为。
elementToShow1.classList.toggle("show")：切换目标元素的 show 类。如果元素已经有 show 类，则移除；如果没有，则添加。

完整示例

<!DOCTYPE html>
<html>
<head>
<title>Toggle Elements on Click</title>
<style>
.mydiv1, .mydiv2 {
  display: none;
}

.mydiv1.show, .mydiv2.show {
  display: block;
}
</style>
</head>
<body>

<a class="toggler1" href="#">Link 1</a>
<a class="toggler2" href="#">Link 2</a>

<div class="mydiv1">Content 1</div>
<div class="mydiv2">Content 2</div>

<script>
// Link 1 and Element 1
var elementToClick1 = document.querySelector(".toggler1");
var elementToShow1 = document.querySelector(".mydiv1");

if (elementToClick1) {
  elementToClick1.addEventListener("click", function(event) {
    event.preventDefault(); // Prevent the default link behavior
    elementToShow1.classList.toggle("show");
  });
}

// Link 2 and Element 2
var elementToClick2 = document.querySelector(".toggler2");
var elementToShow2 = document.querySelector(".mydiv2");

if (elementToClick2) {
  elementToClick2.addEventListener("click", function(event) {
    event.preventDefault(); // Prevent the default link behavior
    elementToShow2.classList.toggle("show");
  });
}
</script>

</body>
</html>

登录后复制