本文旨在指导开发者如何使用 HTML 和 JavaScript 创建一个简单的问答游戏，实现点击选项按钮后切换显示不同的问题区域（Div 元素）的功能。文章将详细讲解实现思路，并提供可运行的代码示例，帮助读者快速掌握相关技术。
概述
在Web开发中，经常会遇到需要根据用户操作动态切换页面内容的需求。例如，在一个问答游戏中，用户点击一个选项后，需要隐藏当前问题并显示下一个问题。本文将介绍如何使用 HTML 和 JavaScript 实现这种效果，将通过控制不同 div 元素的显示与隐藏，来实现问题的切换。
HTML 结构
首先，我们需要创建包含问题和选项的 HTML 结构。每个问题及其选项都应该包含在一个单独的 div 元素中。
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 中包含问题内容和四个选项按钮。
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 效果：
Awesome Quiz .box { display: none; /* 初始状态下隐藏所有问题 */ } .box1 { display: block; /* 初始状态显示开始页面 */ }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/1585948.html
微信扫一扫 
支付宝扫一扫 
