本文旨在指导开发者如何使用 HTML 和 JavaScript 创建一个简单的问答游戏，实现点击选项按钮后切换显示不同的问题区域（Div 元素）的功能。文章将详细讲解实现思路，并提供可运行的代码示例，帮助读者快速掌握相关技术。
概述
在Web开发中，经常会遇到需要根据用户操作动态切换页面内容的需求。例如，在一个问答游戏中，用户点击一个选项后，需要隐藏当前问题并显示下一个问题。本文将介绍如何使用 HTML 和 JavaScript 实现这种效果，将通过控制不同 div 元素的显示与隐藏，来实现问题的切换。
HTML 结构
首先，我们需要创建包含问题和选项的 HTML 结构。每个问题及其选项都应该包含在一个单独的 div 元素中。
Awesome Quiz
Trivia Time ??!!!
Awesome Quiz
Who was the first President of the United States?
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 元素，分别对应开始页面(box1)和三个问题(box2、box3、box4)。每个问题 div 中包含问题内容和四个选项按钮。
立即学习“Java免费学习笔记（深入）”；
JavaScript 实现
接下来，使用 JavaScript 来实现点击选项按钮后切换 div 的显示。
ProWritingAid
AI写作助手软件
114 查看详情
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 .box { display: none; /* 初始状态下隐藏所有问题 */ } .box1 { display: block; /* 初始状态显示开始页面 */ }Awesome Quiz
Trivia Time ??!!!
Awesome Quiz
Who was the first President of the United States?
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
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'; }); });Awesome Quiz
What is the largest country in the world?
Russia
Canada
India
South Africa
Question 3 of 5
总结
通过本文的介绍，我们学习了如何使用 HTML 和 JavaScript 实现多选题切换 div 效果。这种技术可以应用于各种Web应用中，例如问答游戏、调查问卷等。 掌握这种技术，可以帮助开发者创建更加动态和交互性强的Web页面。 记住，使用querySelectorAll获取所有需要监听的元素，并确保初始状态下只显示第一个div元素。 通过灵活运用这些技巧，可以构建出更加复杂和功能丰富的Web应用。
以上就是使用 HTML 和 JavaScript 实现多选题切换 Div 效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/920074.html
微信扫一扫 
支付宝扫一扫 
