使用 HTML 和 JavaScript 实现多选题切换 Div 效果-html教程-PHP中文网

使用 HTML 和 JavaScript 实现多选题切换 Div 效果

碧海醫心

发布： 2025-10-18 12:20:25

原创

831人浏览过

使用 html 和 javascript 实现多选题切换 div 效果

本文旨在指导开发者如何使用 HTML 和 JavaScript 创建一个简单的问答游戏，实现点击选项按钮后切换显示不同的问题区域（Div 元素）的功能。文章将详细讲解实现思路，并提供可运行的代码示例，帮助读者快速掌握相关技术。

概述

在Web开发中，经常会遇到需要根据用户操作动态切换页面内容的需求。例如，在一个问答游戏中，用户点击一个选项后，需要隐藏当前问题并显示下一个问题。本文将介绍如何使用 HTML 和 JavaScript 实现这种效果，将通过控制不同 div 元素的显示与隐藏，来实现问题的切换。

HTML 结构

首先，我们需要创建包含问题和选项的 HTML 结构。每个问题及其选项都应该包含在一个单独的 div 元素中。

<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>

登录后复制

在这个例子中，我们创建了四个 div 元素，分别对应开始页面(box1)和三个问题(box2、box3、box4)。每个问题 div 中包含问题内容和四个选项按钮。

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

JavaScript 实现

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

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

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');

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

// 获取所有选项按钮，并为每个按钮添加事件监听器
const optionsBox2 = document.querySelectorAll('.box2 .option');
optionsBox2.forEach(option => {
    option.addEventListener('click', function() {
        box2.style.display = 'none';
        box3.style.display = 'block';
    });
});

const optionsBox3 = document.querySelectorAll('.box3 .option');
optionsBox3.forEach(option => {
    option.addEventListener('click', function() {
        box3.style.display = 'none';
        box4.style.display = 'block';
    });
});

登录后复制

这段代码首先获取了开始按钮和每个问题 div 元素的引用。然后，为开始按钮添加了一个点击事件监听器，点击后隐藏开始页面并显示第一个问题。接着，使用querySelectorAll获取每个问题的所有选项按钮，并为每个按钮添加点击事件监听器，点击后隐藏当前问题并显示下一个问题。

注意：

初始状态下，除了第一个 div 元素（开始页面）外，其他 div 元素都应该设置为 display: none，以便在点击选项按钮后才能显示。
document.querySelector 只会返回匹配的第一个元素。如果需要获取多个元素，应该使用 document.querySelectorAll。

完整示例

以下是一个完整的示例，展示了如何使用 HTML 和 JavaScript 实现多选题切换 div 效果：

<!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');

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

    // 获取所有选项按钮，并为每个按钮添加事件监听器
    const optionsBox2 = document.querySelectorAll('.box2 .option');
    optionsBox2.forEach(option => {
        option.addEventListener('click', function() {
            box2.style.display = 'none';
            box3.style.display = 'block';
        });
    });

    const optionsBox3 = document.querySelectorAll('.box3 .option');
    optionsBox3.forEach(option => {
        option.addEventListener('click', function() {
            box3.style.display = 'none';
            box4.style.display = 'block';
        });
    });

</script>

</body>
</html>

登录后复制

总结

通过本文的介绍，我们学习了如何使用 HTML 和 JavaScript 实现多选题切换 div 效果。这种技术可以应用于各种Web应用中，例如问答游戏、调查问卷等。掌握这种技术，可以帮助开发者创建更加动态和交互性强的Web页面。记住，使用querySelectorAll获取所有需要监听的元素，并确保初始状态下只显示第一个div元素。通过灵活运用这些技巧，可以构建出更加复杂和功能丰富的Web应用。

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