微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

利用html实现一个有点击（显示、隐藏）效果按钮的实例代码

零下一度
发布： 2017-05-03 16:50:26
原创
7802人浏览过

一个分享按钮，一个隐藏的图片（这个图片绝对定位在右上角）然后就是点击显示，点击隐藏了。

火龙果写作
火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

火龙果写作 106
查看详情 火龙果写作 
<a href="javascript:;" onclick="document.getElementById('mcover').style.display='block';">分享到朋友圈</a>
<div id="mcover" onclick="document.getElementById('mcover').style.display='';" style="display: none;">
     <img src="/public/images/guide.png">
</div>
对应样式如下：
#mcover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 20000;
}
#mcover img {
    position: fixed;
    right: 18px;
    top: 5px;
    width: 260px;
    height: 180px;
    z-index: 999;
}
登录后复制

以上就是利用html实现一个有点击（显示、隐藏）效果按钮的实例代码的详细内容，更多请关注php中文网其它相关文章！

相关标签：
html

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：如何实现网页截屏（html2canvas） 下一篇：利用html实现文字闪烁的效果代码
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
手机版HTML编辑在线入口 HTML编辑手机版运行工具 手机版HTML编辑在线入口是https://www.tutorialspoint.com/codingground.htm，该工具支持多语言编写、语法高亮、实时预览和云端保存，界面简洁适配触屏，加载快且兼容主流手机系统，无需注册即可使用并提供示例模板与导出功能，适合初学者练习。
2025-11-12 19:48:02
936
HTML数据怎样进行特征提取 HTML数据特征工程的实践技巧 核心目标是将HTML转化为结构化特征，需提取标签层级、文本语义、属性交互信息，并通过向量化与降维构建模型输入，结合任务需求进行特征选择与噪声清洗。
2025-11-12 19:43:11
662
html滚动条滚动条轨道怎么加边框_html滚动条轨道边框样式设置方法 使用::-webkit-scrollbar-track可为滚动条轨道添加边框，适用于Chrome、Edge、Safari等浏览器；2.通过border属性设置边框样式，并配合背景、圆角提升视觉效果；3.应同步定义滑块及悬停样式以保持整体协调；4.注意仅WebKit内核支持完整自定义，Firefox仅支持scrollbar-width和scrollbar-color；5.实际应用中需权衡美观与可用性，避免过度设计影响用户体验。
2025-11-12 19:42:03
531
html代码怎么运行_html代码在浏览器中运行原理与测试方法 首先理解HTML在浏览器中通过请求、解析DOM和渲染显示，再通过本地文件运行、开发者工具调试或使用在线编辑器实现实时预览测试效果。
2025-11-12 19:35:02
704
html代码检查工具_html代码检查网页版平台 答案：https://www.htmlvalidator.com/web-validator是一款在线HTML代码检查工具，支持多版本HTML校验，提供实时错误定位与修复建议，界面简洁无需安装，可直接检测网页URL或上传文件，兼容W3C标准并集成CSS、JS基础检查功能。
2025-11-12 19:26:02
434
html函数如何设置元素样式属性 html函数结合CSS的内联技巧 直接在HTML标签中使用style属性设置内联样式，可快速生效但不利于维护；2.通过JavaScript操作元素的style属性实现动态控制，需使用驼峰命名法；3.内联样式优先级高，适合动态场景但应避免重复代码和安全风险；4.可结合模板字符串动态生成带样式的HTML内容，适用于组件化开发。
2025-11-12 18:58:02
999
滚动条轨道背景色怎么改_html滚动条轨道背景颜色设置教程 答案：通过CSS的::-webkit-scrollbar-track伪元素可设置滚动条轨道背景色，适用于Webkit内核浏览器。示例中定义了滚动条宽度、轨道背景色及滑块样式，并支持悬停效果；该方法在Chrome、Edge、Safari中有效，Firefox需借助JavaScript库实现兼容。
2025-11-12 18:55:02
832
html转txt工具_html转txt网页版转换器 答案：html转txt工具可通过网页版平台https://www.textise.net快速使用，支持输入URL自动去除标签生成纯文本，无需安装软件，兼容多设备，操作简洁高效，适用于内容提取与数据采集，保障隐私安全。
2025-11-12 18:53:02
233
html代码怎么框架_html框架标签使用方法与iframe嵌入代码教程 使用HTML框架技术可实现页面模块化布局与独立内容加载。一、通过frameset和frame构建传统框架：1.创建无body的HTML文件，用定义框架集；2.使用cols属性水平分割窗口，如cols="25%,75%"；3.每个通过src指定加载页面路径；4.垂直分割使用rows属性；5.添加noresize禁止调整大小。二、使用iframe嵌入内联框架：1.在任意位置插入标签；2.设置src指向目标URL；3.定义width和height控制尺寸；4.使用name配合a标签target实现在i
2025-11-12 18:43:39
600
如何通过Sublime Text解决HTML性能瓶颈的详细教程 SublimeText通过语法校验、高效编辑、构建集成与代码片段，提升HTML开发效率与代码质量，间接优化页面性能。
2025-11-12 18:40:02
599
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部