本文旨在指导开发者如何使用HTML和JavaScript实现一个简单的多选题切换Div显示效果。通过监听按钮点击事件，控制不同Div的显示与隐藏，从而实现题目切换的交互效果。文章将提供详细的代码示例和解释，并针对常见问题提供解决方案。
HTML结构
首先，我们需要创建HTML结构，使用多个div元素来表示不同的题目。每个div包含题目内容和多个选项按钮。
Awesome Quiz
Trivia Time ??!!!
Awesome Quiz
Who was the first President of the United States?
立即学习“Java免费学习笔记（深入）”；
George Washington
Thomas Jefferson
Thomas Edinson
I don't Know
Question 1 of 5
Awesome Quiz
What is Queen Elizabeth II's surname?
Jason
Windsor
Drakeford
William
Question 2 of 5
Awesome Quiz
What is the largest country in the world?
Russia
Canada
India
South Africa
Question 3 of 5
每个题目div都具有唯一的类名（如box2、box3等），选项按钮也具有相同的类名option。
JavaScript实现
接下来，使用JavaScript来实现点击选项按钮后切换div显示的效果。
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 toolet 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页面交互效果。
以上就是使用HTML和JavaScript实现多选题切换Div显示效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585984.html
微信扫一扫 
支付宝扫一扫 
