使用HTML和JavaScript实现按钮点击后切换Div显示效果-html教程-PHP中文网

使用HTML和JavaScript实现按钮点击后切换Div显示效果

聖光之護

发布： 2025-10-18 10:31:00

原创

559人浏览过

使用html和javascript实现按钮点击后切换div显示效果

本文旨在指导开发者如何使用HTML和JavaScript实现一个简单的问答游戏页面，该页面包含多个问题，每个问题有多个选项按钮。点击选项按钮后，当前问题区域隐藏，下一个问题区域显示。文章将详细讲解实现思路、关键代码以及注意事项，帮助读者快速掌握该功能的实现方法。

页面结构（HTML）

首先，我们需要构建页面的基本HTML结构。每个问题及其选项都包含在一个独立的 div 容器中。使用 box 类作为所有 div 的基础样式，并使用 box1、box2 等类来区分不同的问题区域。

<div class="box box1">
    <h1>Awesome Quiz</h1>
    <p>Trivia Time ??!!!</p>
    <button id="start">Start</button>
</div>
<div class="quest box2">
    <h2>Awesome Quiz</h2>
    <p>Who was the first President of the United States?</p>

    <p>George Washington</p>
    <button class="option option1">SELECT ANSWER</button>
    <p>Thomas Jefferson</p>
    <button class="option option2">SELECT ANSWER</button>
    <p>Thomas Edinson</p>
    <button class="option option3">SELECT ANSWER</button>
    <p>I don't Know</p>
    <button class="option option4">SELECT ANSWER</button>
    <div class="page">
        <p>Question 1 of 5</p>
    </div>
</div>
<div class="quest box3">
    <h2>Awesome Quiz</h2>
    <p>What is Queen Elizabeth II's surname?</p>

    <p>Jason</p>
    <button class="option option1">SELECT ANSWER</button>
    <p>Windsor</p>
    <button class="option option2">SELECT ANSWER</button>
    <p>Drakeford</p>
    <button class="option option3">SELECT ANSWER</button>
    <p>William</p>
    <button class="option option4">SELECT ANSWER</button>
    <div class="page">
        <p>Question 2 of 5</p>
    </div>
</div>
<div class="quest box4">
    <h2>Awesome Quiz</h2>
    <p>What is the largest country in the world?</p>

    <p>Russia</p>
    <button class="option option1">SELECT ANSWER</button>
    <p>Canada</p>
    <button class="option option2">SELECT ANSWER</button>
    <p>India</p>
    <button class="option option3">SELECT ANSWER</button>
    <p>South Africa</p>
    <button class="option option4">SELECT ANSWER</button>
    <div class="page">
        <p>Question 3 of 5</p>
    </div>
</div>

登录后复制

交互逻辑（JavaScript）

接下来，使用JavaScript来实现点击按钮后切换 div 显示的效果。

获取元素：使用 document.querySelector 和 document.querySelectorAll 获取需要操作的HTML元素。 querySelector 返回匹配的第一个元素，而 querySelectorAll 返回所有匹配的元素列表。

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

豆绘AI
豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

485

查看详情
绑定事件监听器：为每个选项按钮绑定点击事件监听器。
切换显示状态：在事件处理函数中，隐藏当前问题区域，显示下一个问题区域。

let start = document.querySelector('#start');
let intro = document.querySelector('.box1');
let box2 = document.querySelector('.box2');
let box3 = document.querySelector('.box3');
let box4 = document.querySelector('.box4');
let box5 = document.querySelector('.box5');
let box6 = document.querySelector('.box6');

start.addEventListener('click', function(){
    intro.style.display = 'none';
    box2.style.display = 'block';
})

// 获取box2下的所有option按钮
let select1 = document.querySelectorAll('.box2 .option');
// 循环绑定事件
select1.forEach(function(button) {
    button.addEventListener('click', function(){
        box2.style.display = 'none';
        box3.style.display = 'block';
    })
});

let select2 = document.querySelectorAll('.box3 .option');
select2.forEach(function(button) {
    button.addEventListener('click', function(){
        box3.style.display = 'none';
        box4.style.display = 'block';
    })
});

let select3 = document.querySelectorAll('.box4 .option');
select3.forEach(function(button) {
    button.addEventListener('click', function(){
        box4.style.display = 'none';
        box5.style.display = 'block';
    })
});

登录后复制

完整代码示例

将HTML和JavaScript代码整合在一起，得到完整的代码示例：

<!DOCTYPE html>
<html>
<head>
<title>Awesome Quiz</title>
<style>
    .box {
        display: none; /* 初始状态隐藏所有问题区域 */
    }
    .box1 {
        display: block; /* 初始状态显示第一个区域 */
    }
</style>
</head>
<body>
    <div class="box box1">
        <h1>Awesome Quiz</h1>
        <p>Trivia Time ??!!!</p>
        <button id="start">Start</button>
    </div>
    <div class="quest box2">
        <h2>Awesome Quiz</h2>
        <p>Who was the first President of the United States?</p>

        <p>George Washington</p>
        <button class="option option1">SELECT ANSWER</button>
        <p>Thomas Jefferson</p>
        <button class="option option2">SELECT ANSWER</button>
        <p>Thomas Edinson</p>
        <button class="option option3">SELECT ANSWER</button>
        <p>I don't Know</p>
        <button class="option option4">SELECT ANSWER</button>
        <div class="page">
            <p>Question 1 of 5</p>
        </div>
    </div>
    <div class="quest box3">
        <h2>Awesome Quiz</h2>
        <p>What is Queen Elizabeth II's surname?</p>

        <p>Jason</p>
        <button class="option option1">SELECT ANSWER</button>
        <p>Windsor</p>
        <button class="option option2">SELECT ANSWER</button>
        <p>Drakeford</p>
        <button class="option option3">SELECT ANSWER</button>
        <p>William</p>
        <button class="option option4">SELECT ANSWER</button>
        <div class="page">
            <p>Question 2 of 5</p>
        </div>
    </div>
    <div class="quest box4">
        <h2>Awesome Quiz</h2>
        <p>What is the largest country in the world?</p>

        <p>Russia</p>
        <button class="option option1">SELECT ANSWER</button>
        <p>Canada</p>
        <button class="option option2">SELECT ANSWER</button>
        <p>India</p>
        <button class="option option3">SELECT ANSWER</button>
        <p>South Africa</p>
        <button class="option option4">SELECT ANSWER</button>
        <div class="page">
            <p>Question 3 of 5</p>
        </div>
    </div>

    <script>
        let start = document.querySelector('#start');
        let intro = document.querySelector('.box1');
        let box2 = document.querySelector('.box2');
        let box3 = document.querySelector('.box3');
        let box4 = document.querySelector('.box4');
        let box5 = document.querySelector('.box5');
        let box6 = document.querySelector('.box6');

        start.addEventListener('click', function(){
            intro.style.display = 'none';
            box2.style.display = 'block';
        })

        // 获取box2下的所有option按钮
        let select1 = document.querySelectorAll('.box2 .option');
        // 循环绑定事件
        select1.forEach(function(button) {
            button.addEventListener('click', function(){
                box2.style.display = 'none';
                box3.style.display = 'block';
            })
        });

        let select2 = document.querySelectorAll('.box3 .option');
        select2.forEach(function(button) {
            button.addEventListener('click', function(){
                box3.style.display = 'none';
                box4.style.display = 'block';
            })
        });

        let select3 = document.querySelectorAll('.box4 .option');
        select3.forEach(function(button) {
            button.addEventListener('click', function(){
                box4.style.display = 'none';
                box5.style.display = 'block';
            })
        });
    </script>
</body>
</html>

登录后复制

注意事项和总结

querySelector vs. querySelectorAll: querySelector 只返回匹配的第一个元素，而 querySelectorAll 返回所有匹配的元素列表。在需要操作多个元素时，务必使用 querySelectorAll，并循环处理每个元素。
代码可维护性: 当问题数量增加时，手动编写每个问题的事件处理函数会变得繁琐且容易出错。可以考虑使用循环或函数来动态生成事件处理函数，提高代码的可维护性。
CSS样式: 为了实现更好的用户体验，可以添加CSS样式来美化页面，例如设置按钮的颜色、字体、间距等。
边界情况处理: 确保处理好边界情况，例如最后一个问题完成后，应该显示一个结束页面或者重新开始游戏。

通过本文的讲解，您应该能够使用HTML和JavaScript实现一个简单的问答游戏页面，并理解其中的核心概念和实现方法。希望本文对您有所帮助！

以上就是使用HTML和JavaScript实现按钮点击后切换Div显示效果的详细内容，更多请关注php中文网其它相关文章！