1、打开html开发软件，新建一个html文件。
2、在html文件上创建一个button按钮，然后给这个按钮设置一个id，在案例中把按钮的id设置为show。
3、然后创建一个隐藏的div，把需要隐藏的内容写到这个div上，然后给这个div设置一个id。
4、给div设置隐藏的样式。在
标签后面为id为hide设置样式display:none,这个样id为hide的div就会被隐藏掉了。</p>
<p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F86d6277f9e2f07083ae9e856e624b899a801f2fc%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/86d6277f9e2f07083ae9e856e624b899a801f2fc"></p>
<p>5、为button按钮添加一个点击后隐藏事件。点击button按钮后，把隐藏的div的display修改为block，这样点击后div就会显示了。</p>
<p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2Fa1ec08fa513d269772e3c50b5afbb2fb4316d8b0%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/a1ec08fa513d269772e3c50b5afbb2fb4316d8b0"></p>
<p>6、保存好html后使用浏览器打开，点击button按钮就会发现隐藏的div就会显示出来了。</p>
<p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F7aec54e736d12f2ec235633640c2d562853568b0%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/7aec54e736d12f2ec235633640c2d562853568b0"></p></p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="wendaright">
<div class="wdluluerwema">
<div class="wdxgwttop">相关问答</div>
<div class="wdxgwtnr">
</div>
<div class="clear"></div>
</div>
<!-- 其他随机问答['id'=>alphaID($like['zid'])] -->
<div class="wdluluerwema">
<div class="wdxgwttop">最新问答</div>
<div class="wdxgwtnr">
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/368087092191055932.html">CAD中栅格、极轴、对象追踪分别有什么用途？</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/2014045653379800788.html">在sqlserver中用下面语句建了一个视图，但是视图中有重复数据，修改语句把重复数据筛掉保持数据唯一性？</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/2268958658300653348.html">耳机插上去不紧，会掉，怎么办那？</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/1998409846768754867.html">at the time of是什么意思</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/463901035.html">我的QQ音乐歌词不见了如何恢复QQ音乐桌面歌词</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/153645269.html">亚运会志愿者面试的自我介绍</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/627823957683841244.html">快手直播充值12块钱就行 我就想问一下到底在哪充</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/22979642.html">如果双方离婚,女方主动放弃财产和子女抚养权,日后反悔怎么办?</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/23219177.html">以色列和巴勒斯坦是什么关系?为什么有巴以冲突?</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.g230.com/556221563.html">工程建设项目管理制度</a></div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="footer">
<!-- 移动底部导航 -->
<div class="fanhuitop"><a href="#top" ref="nofollow"><img src="https://www.g230.com/static/old/img/fhtop.png" alt="返回顶部" title="返回顶部"></a></div>
<div class="dibu">
<div class="dibu">
</div>
</div>
<div class="banquan">
<p>内容全部来源于网络收集，如有侵权，请联系网站删除：QQ：24596024</p>
</div>
</div>
</div>
</div>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?78733b427b0a9dce19688d903e89fc12";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
