本文旨在指导开发者如何使用HTML和JavaScript实现一个简单的多选题切换Div显示效果。通过监听按钮点击事件，控制不同Div的显示与隐藏，从而实现题目切换的交互效果。文章将提供详细的代码示例和解释，并针对常见问题提供解决方案。
HTML结构
首先，我们需要创建HTML结构，使用多个div元素来表示不同的题目。每个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都具有唯一的类名（如box2、box3等），选项按钮也具有相同的类名option。
JavaScript实现
接下来，使用JavaScript来实现点击选项按钮后切换div显示的效果。
立即学习“Java免费学习笔记（深入）”；
let start = document.querySelector('#start');
let intro = document.querySelector('.box1');
let quest = document.querySelector('.quest');
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');
let select1 = document.querySelector('.box2 .option'); // using querySelector here too
let select2 = document.querySelector('.box3 .option');
let select3 = document.querySelector('.box4 .option');
let select4 = document.querySelector('.box5 .option');
let select5 = document.querySelector('.box6 .option');
start.addEventListener('click', function(){
intro.style.display = 'none';
box2.style.display = 'block';
})
select1.addEventListener('click', function(){
box2.style.display = 'none';
box3.style.display = 'block';
})
select2.addEventListener('click', function(){
box3.style.display = 'none';
box4.style.display = 'block';
})
select3.addEventListener('click', function(){
box4.style.display = 'none';
box5.style.display = 'block';
})
// Commenting this out because there is no .box5 element in the HTML
// select4.addEventListener('click', function(){
// box5.style.display = 'none';
// box6.style.display = 'block';
// })这段代码首先获取所有需要操作的HTML元素，包括题目div和选项按钮。然后，为每个选项按钮添加点击事件监听器。当点击按钮时，隐藏当前div，显示下一个div。
注意: 上述代码中使用了 document.querySelector 方法，它只会返回匹配选择器的第一个元素。这意味着每个题目只有第一个选项按钮会触发切换效果。
改进方案：使用 querySelectorAll
为了解决上述问题，我们需要使用 document.querySelectorAll 方法，它会返回匹配选择器的所有元素。然后，我们可以遍历所有选项按钮，为每个按钮添加点击事件监听器。
const optionButtons = document.querySelectorAll('.option');
optionButtons.forEach(button => {
button.addEventListener('click', function() {
// 获取当前题目div
const currentQuestion = this.closest('.quest');
// 隐藏当前题目div
currentQuestion.style.display = 'none';
// 获取下一个题目div
const nextQuestion = currentQuestion.nextElementSibling;
// 显示下一个题目div
if (nextQuestion && nextQuestion.classList.contains('quest')) {
nextQuestion.style.display = 'block';
} else {
// 如果没有下一个题目，可以显示完成页面或者其他操作
alert('Quiz completed!');
}
});
});
let start = document.querySelector('#start');
let intro = document.querySelector('.box1');
start.addEventListener('click', function(){
intro.style.display = 'none';
document.querySelector('.box2').style.display = 'block';
})这段代码首先使用 document.querySelectorAll('.option') 获取所有选项按钮。然后，使用 forEach 方法遍历每个按钮，并添加点击事件监听器。在事件处理函数中，使用 this.closest('.quest') 获取当前按钮所在的题目div，并隐藏它。接着，使用 nextElementSibling 获取下一个兄弟元素，并判断它是否是题目div。如果是，则显示下一个题目div。
总结
本文介绍了如何使用HTML和JavaScript实现一个简单的多选题切换Div显示效果。通过监听按钮点击事件，控制不同Div的显示与隐藏，从而实现题目切换的交互效果。同时，针对 querySelector 只能获取第一个匹配元素的问题，提出了使用 querySelectorAll 的解决方案。希望本文能帮助开发者更好地理解和应用JavaScript来实现动态的Web页面交互效果。
