本文旨在指导开发者如何使用 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 的显示。
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应用。
