例:默认div隐藏,点击按钮时出现,再点击时隐藏。
<a href="#" onclick="f('ycbc')"; >控制按钮</a>
<div id="ycbc" style="display:none">隐藏的内容</div>
解决方法一:javascript
利用onclick事件调用f('ycbc')函数,参数为隐藏的内容div的id,在函数加入钮时出现,再点击时隐藏代码,如下:
1 2 3 4 5 6 7 | function f(a){ var obj = document.getElementById(a); if (obj.style.display== "" ){ obj.style.display = "none" ; } else {<br> obj.style.display = "" ; } } |
注意:隐藏的内容div要加style="display:none"
a标签的KENG——a标签的href="#" 一定要加#,否则,点击后想当于刷新本页。加入的效果出不来。
解决方法二:jquery
1 | <script src= "../js/jquery.min.js" ></script> |
注意:使用jquery记得要引入jquery.js
1 2 | <a href= "#" " id=" butonclick ">点击按钮</a> <div id=" ycxg " style=" display: none;">隐藏的内容</div> |
原理:查找id#butonclick调用onclick事件,判断隐藏的内容的id="ycxg"的CSS样式,当display=none,隐藏的内容的id="ycxg"的CSS样式display=block,否则display=none;
1 2 3 4 5 6 7 8 9 | $(document).ready( function () { $( '#butonclick' ).click( function (){ if ($( "#ycxg" ).css( 'display' )== 'none' ){ $( "#ycxg" ).css( "display" , "block" ); } else { $( "#ycxg" ).css( "display" , "none" ); } }) }); |
或使用jquery显示隐藏效果
1 2 3 4 5 | $(document).ready( function () { $( '#butonclick' ).click( function (){ $( "#ycxg" ).toggle(); }) }); |
扩展:
$("#hide").click(function(){ $("p").hide(); //隐藏 }); $("#show").click(function(){ $("p").show(); //显示
});
分类:
日常问题
, javascript
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· SQL Server统计信息更新会被阻塞或引起会话阻塞吗?
· 本地部署 DeepSeek:小白也能轻松搞定!
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 如何基于DeepSeek开展AI项目