新闻中心

使用HTML和J*aScript实现按钮点击后切换Div显示效果

2025-10-18
浏览次数：次
返回列表

使用html和javascript实现按钮点击后切换div显示效果

本文旨在指导开发者如何使用HTML和J*aScript实现一个简单的问答游戏页面，该页面包含多个问题，每个问题有多个选项按钮。点击选项按钮后，当前问题区域隐藏，下一个问题区域显示。文章将详细讲解实现思路、关键代码以及注意事项，帮助读者快速掌握该功能的实现方法。

页面结构（HTML）

首先，我们需要构建页面的基本HTML结构。每个问题及其选项都包含在一个独立的 div 容器中。 使用 box 类作为所有 div 的基础样式，并使用 box1、box2 等类来区分不同的问题区域。

<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>

交互逻辑（J*aScript）

接下来，使用J*aScript来实现点击按钮后切换 div 显示的效果。

  1. 获取元素：使用 document.querySelector 和 document.querySelectorAll 获取需要操作的HTML元素。 querySelector 返回匹配的第一个元素，而 querySelectorAll 返回所有匹配的元素列表。

  2. 绑定事件监听器：为每个选项按钮绑定点击事件监听器。

    AI Surge Cloud AI Surge Cloud

    低代码数据分析平台，帮助企业快速交付深度数据

    AI Surge Cloud 87 查看详情 AI Surge Cloud

  3. 切换显示状态：在事件处理函数中，隐藏当前问题区域，显示下一个问题区域。

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');
let box5 = document.querySelector('.box5');
let box6 = document.querySelector('.box6');

start.addEventListener('click', function(){
    intro.style.display = 'none';
    box2.style.display = 'block';
})

// 获取box2下的所有option按钮
let select1 = document.querySelectorAll('.box2 .option');
// 循环绑定事件
select1.forEach(function(button) {
    button.addEventListener('click', function(){
        box2.style.display = 'none';
        box3.style.display = 'block';
    })
});

let select2 = document.querySelectorAll('.box3 .option');
select2.forEach(function(button) {
    button.addEventListener('click', function(){
        box3.style.display = 'none';
        box4.style.display = 'block';
    })
});

let select3 = document.querySelectorAll('.box4 .option');
select3.forEach(function(button) {
    button.addEventListener('click', function(){
        box4.style.display = 'none';
        box5.style.display = 'block';
    })
});

完整代码示例

将HTML和J*aScript代码整合在一起，得到完整的代码示例：

<!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');
        let box5 = document.querySelector('.box5');
        let box6 = document.querySelector('.box6');

        start.addEventListener('click', function(){
            intro.style.display = 'none';
            box2.style.display = 'block';
        })

        // 获取box2下的所有option按钮
        let select1 = document.querySelectorAll('.box2 .option');
        // 循环绑定事件
        select1.forEach(function(button) {
            button.addEventListener('click', function(){
                box2.style.display = 'none';
                box3.style.display = 'block';
            })
        });

        let select2 = document.querySelectorAll('.box3 .option');
        select2.forEach(function(button) {
            button.addEventListener('click', function(){
                box3.style.display = 'none';
                box4.style.display = 'block';
            })
        });

        let select3 = document.querySelectorAll('.box4 .option');
        select3.forEach(function(button) {
            button.addEventListener('click', function(){
                box4.style.display = 'none';
                box5.style.display = 'block';
            })
        });
    </script>
</body>
</html>

注意事项和总结

  • querySelector vs. querySelectorAll: querySelector 只返回匹配的第一个元素，而 querySelectorAll 返回所有匹配的元素列表。 在需要操作多个元素时，务必使用 querySelectorAll，并循环处理每个元素。
  • 代码可维护性: 当问题数量增加时，手动编写每个问题的事件处理函数会变得繁琐且容易出错。 可以考虑使用循环或函数来动态生成事件处理函数，提高代码的可维护性。
  • CSS样式: 为了实现更好的用户体验，可以添加CSS样式来美化页面，例如设置按钮的颜色、字体、间距等。
  • 边界情况处理: 确保处理好边界情况，例如最后一个问题完成后，应该显示一个结束页面或者重新开始游戏。

通过本文的讲解，您应该能够使用HTML和J*aScript实现一个简单的问答游戏页面，并理解其中的核心概念和实现方法。 希望本文对您有所帮助！

以上就是使用HTML和J*aScript实现按钮点击后切换Div显示效果的详细内容，更多请关注其它相关文章！


# 相关文章  # 配色网站建设方案  # 山西seo排名哪家好  # 北京中公教育seo  # 快手推广网站免费入口下载  # 给网站加微信推广链接  # 广东微信营销推广  # 徐汇营销推广售后人员  # 新手网站建设知识  # 浦口区手机网站优化排名  # 肇庆网站建设推广  # 一个问题  # 解决问题  # 中文网  # css  # 单选框  # 绑定  # 多个  # 第一个  # 表单  # 显示效果  # html元素  # 点击事件  # css样式  # win  # html  # java  # javascript 


相关栏目： 【 科技资讯46185 】 【 网络学院92790 】


相关推荐： 拼多多赚钱渠道_拼多多收益来源  excel怎么制作工资条 excel快速生成工资条的方法  飞书妙记怎样用语音转文字速记_飞书妙记用语音转文字速记【速记方法】  微博网页版直接访问 微博网页版账号管理快速入口  FullCalendar 自定义按钮样式定制指南  CSS Flexbox如何实现多行排列_flex-wrap wrap自动换行显示  PHP 枚举：根据字符串获取枚举案例的策略与实现  天猫2025双十一0点秒杀攻略 天猫爆款抢购时间  反效果？《战地6》免费试玩开启后玩家数不升反降  J*a实现学校排课程序_面向对象结构化项目示例  Safari自带网页翻译功能怎么用 无需插件轻松看懂外文网站【方法】  React/Next.js中实现列表项的动态选择与移动  抖音小游戏合成大西瓜免费秒玩入口链接 抖音小游戏热门合集秒玩网站  生成rdflib自定义SPARQL函数：参数匹配与实践指南  58动漫网在线官方网 58动漫网正版动漫入口网址  Google翻译怎么语音输入_Google翻译语音输入功能使用与设置方法  React Router v6 教程：构建认证保护的私有路由与重定向策略  台积电1.4nm工艺A14瞄准2028：10年来性能提升80%  J*aScript类型检查_j*ascript代码规范  Yandex免登录官网入口_俄罗斯Yandex搜索引擎直达链接  动漫共和国防屏蔽稳定域名-动漫共和国官方正版直达通道  Yandex官网免登录入口_俄罗斯Yandex搜索引擎一键访问  星露谷物语官网入口 星露谷物语游戏官网入口  火狐浏览器占用内存高卡顿怎么办 火狐浏览器性能优化设置技巧  邮编格式怎么匹配地址_根据邮编格式快速匹配详细地址的技巧  在Qt QML中通过Python字典动态更新TextEdit内容的教程  随机参数递归函数的基准调用次数与时间复杂度探究  SteamMachine定价或为699美元 大家想入手吗？  支付宝碰一碰设备是REDMI手机吗 博主拆机辟谣：处理器、内存都不一样  三星ZFold5多任务卡顿_Samsung ZFold5流畅度提升  如何使用 Excel 发布器与 Power BI 分享 Excel 洞察  苹果手机如何防止被恶意App追踪  J*a应用程序首次运行自动创建文件与目录的最佳实践  Golang如何实现Web接口签名验证_Golang Web接口签名校验开发方法  漫蛙漫画网页端入口 漫蛙2官方正版漫画站点  Excel Power Pivot如何处理XML数据源 构建高级数据模型  yandex入口引擎手机版 yandex安卓版下载入口  C++如何比较两个字符串_C++ string compare函数与操作符对比  qq游戏手机版下载安装_qq游戏移动端入口  12306怎么选座位选到安静区_12306选座安静区域选择策略  如何使 Jest 模拟函数默认抛出错误以提高测试效率  汽水音乐车机版8.9下载 汽水音乐车机版8.9版本安装入口  HTML5原生日期选择器与jQuery UI：实现日期选择器的联动与程序化控制  在J*a中如何开发在线活动报名与管理系统_活动报名管理项目实战解析  ArchiveofOurOwn小说阅读-ArchiveofOurOwn同人作品访问链接  Go Martini框架：动态服务解码后的图片内容  AO3网页版合集入口 Archive of Our Own同人作品浏览指南  海量存储：机器视觉智能化的核心基石  Golang如何实现简单的Web表单_Golang表单提交与验证处理方法  AO3官方镜像站点汇总 AO3同人作品网页版直达链接 

上一篇：非关联元素悬停交互：使用J*aScript动态调整DIV亮度
下一篇：CSS :hover 伪类选择器失效：常见语法错误与排查指南

搜索