JavaScript：点击按钮时关闭前一个元素-js教程-PHP中文网

JavaScript：点击按钮时关闭前一个元素

心靈之曲

发布： 2025-08-01 17:04:11

原创

450人浏览过

javascript：点击按钮时关闭前一个元素

本文介绍了如何使用 JavaScript 实现点击按钮显示图片及其描述，并在点击新按钮时关闭之前显示的图片和描述的功能。通过添加和移除 CSS 类来控制元素的显示和隐藏，确保每次只有一个图片和描述可见。

实现原理

核心思路是利用 CSS 类来控制图片容器和描述的显示与隐藏。默认情况下，所有图片容器和描述都是隐藏的。当点击按钮时，首先移除所有已经激活的图片容器的 active 类，然后为当前点击按钮对应的图片容器和描述添加 active 类，从而显示它们。

代码实现

以下是一个完整的 HTML 示例，展示了如何实现该功能：

DeepBrain

AI视频生成工具，ChatGPT +生成式视频AI =你可以制作伟大的视频!

108

查看详情

<!DOCTYPE html>
<html>
<head>
    <title>Image Description</title>
    <style>
        .image-container {
            display: none;
            text-align: center;
        }

        .image-container.active {
            display: block;
        }

        .description {
            display: none;
        }

        .description.active {
            display: block;
        }
    </style>
</head>
<body>
    <button onclick="toggleImageDescription('image1')">Show Image 1</button>
    <button onclick="toggleImageDescription('image2')">Show Image 2</button>
    <button onclick="toggleImageDescription('image3')">Show Image 3</button>

    <div id="image1" class="image-container">
        <img src="image1.jpg" alt="Image 1">
        <div class="description">Description for Image 1</div>
    </div>
    <div id="image2" class="image-container">
        <img src="image2.jpg" alt="Image 2">
        <div class="description">Description for Image 2</div>
    </div>
    <div id="image3" class="image-container">
        <img src="image3.jpg" alt="Image 3">
        <div class="description">Description for Image 3</div>
    </div>

    <script>
        function toggleImageDescription(imageId) {
            const imageContainer = document.getElementById(imageId);
            const description = imageContainer.querySelector(".description");

            // Close previously opened image containers
            const activeContainers = document.querySelectorAll(".image-container.active");
            activeContainers.forEach(container => {
                container.classList.remove("active");
            });

            // Toggle visibility of the clicked image container and description
            imageContainer.classList.toggle("active");
            description.classList.toggle("active");
        }
    </script>
</body>
</html>

登录后复制

代码解释

HTML 结构： 每个图片及其描述都包含在一个 div 元素中，该 div 具有 image-container 类，并且具有唯一的 id。描述包含在具有 description 类的 div 元素中。
CSS 样式：
- .image-container 和 .description 默认设置为 display: none;，隐藏元素。
- .image-container.active 和 .description.active 设置为 display: block;，显示元素。
JavaScript 函数 toggleImageDescription(imageId)：
- 获取与给定 imageId 对应的图片容器和描述元素。
- 使用 document.querySelectorAll(".image-container.active") 获取所有当前激活的图片容器。
- 遍历所有激活的图片容器，并移除它们的 active 类，从而隐藏它们。
- 为当前点击按钮对应的图片容器和描述添加 active 类，从而显示它们。