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

概述

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

HTML 结构

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

    
Awesome Quiz
    
Trivia Time ??!!!
立即学习“Java免费学习笔记（深入）”；
    Start



    
Awesome Quiz
    
Who was the first President of the United States?

    
George Washington
    SELECT ANSWER
    
Thomas Jefferson
    SELECT ANSWER
    
Thomas Edinson
    SELECT ANSWER
    
I don't Know
    SELECT ANSWER
    

        
Question 1 of 5
    



    
Awesome Quiz
    
What is Queen Elizabeth II's surname?

    
Jason
    SELECT ANSWER
    
Windsor
    SELECT ANSWER
    
Drakeford
    SELECT ANSWER
    
William
    SELECT ANSWER
    

        
Question 2 of 5
    



    
Awesome Quiz
    
What is the largest country in the world?

    
Russia
    SELECT ANSWER
    
Canada
    SELECT ANSWER
    
India
    SELECT ANSWER
    
South Africa
    SELECT ANSWER
    

        
Question 3 of 5
    

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

JavaScript 实现

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

Asp开源商城系统YothSHOP

YothSHOP是优斯科技鼎力打造的一款asp开源商城系统，支持access和Sql server切换，完善的会员订单管理，全站生成静态html文件，SEO优化效果极佳，后台XP模式和普通模式随意切换，极易操作，欢迎使用！ Asp开源商城系统YothSHOP功能介绍：1.使用静态页和程序页分离技术，网站可自由开启和关闭，实现全站生成静态页，可动静态切换，方便二次开发和后期维护。2.管理员管理：后台

下载

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 效果：

    
    




    
Awesome Quiz
    
Trivia Time ??!!!
立即学习“Java免费学习笔记（深入）”；
    Start



    
Awesome Quiz
    
Who was the first President of the United States?

    
George Washington
    SELECT ANSWER
    
Thomas Jefferson
    SELECT ANSWER
    
Thomas Edinson
    SELECT ANSWER
    
I don't Know
    SELECT ANSWER
    

        
Question 1 of 5
    



    
Awesome Quiz
    
What is Queen Elizabeth II's surname?

    
Jason
    SELECT ANSWER
    
Windsor
    SELECT ANSWER
    
Drakeford
    SELECT ANSWER
    
William
    SELECT ANSWER
    

        
Question 2 of 5
    



    
Awesome Quiz
    
What is the largest country in the world?

    
Russia
    SELECT ANSWER
    
Canada
    SELECT ANSWER
    
India
    SELECT ANSWER
    
South Africa
    SELECT ANSWER
    

        
Question 3 of 5
    

总结

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