【JS】jquery怎么实现点击一个按钮控制一个div的显示和隐藏-白嫖资源网

【JS】jquery怎么实现点击一个按钮控制一个div的显示和隐藏

  1. 示例html
  2. 1
  3. 2
  4.  
  5. <div class=“abc” style=“display:none”></div>
  6. <input type=“button” class=“but” />
  7. 最简单的方法:
  8. 1
  9. 2
  10. 3
  11. 4
  12. 5
  13. 6
  14. 7
  15.  
  16. <script>
  17. $(document).ready(function(e) {
  18. $(“.but”).click(function(e) {
  19. $(“.abc”).toggle();
  20. });搜索
  21. });
  22. </script>
  23. toggle() 的作用就是当对象是显示的就隐藏,当是隐藏的则显示。
  24. ——
  25. 如果你除了显示和隐藏之外还需要同时实现其他功能的话,可以这样:
  26. 1
  27. 2
  28. 3
  29. 4
  30. 5
  31. 6
  32. 7
  33. 8
  34. 9
  35. 10
  36. 11
  37. 12
  38. 13
  39. 14
  40.  
  41. <script>
  42. $(document).ready(function(e) {
  43. $(“.but”).click(function(e) {
  44. if( $(“.abc”).hasClass(“show”) ){
  45. // 执行隐藏
  46. $(“.abc”).hide().removeClass(“show”);
  47. // 其他
  48. }else{
  49. // 显示
  50. $(“.abc”).show().addClass(“show”);
  51. }
  52. });
  53. });
  54. </script>
  55. 这里通过自定义一个 class : show 来判断 div 是显示或隐藏
  56. hasClass() 是否存在某个class
  57. hide() 隐藏对象
  58. show() 显示对象
  59. removeClass() 移除一个class
  60. addClass() 添加一个class
  61. 除此,还可以通过jquery设置这个 div css : display:none/block 来实现隐藏/显示


白嫖资源网是一个优秀的资源网,极致体验,免费投稿还能赚钱!
白嫖资源网 » 【JS】jquery怎么实现点击一个按钮控制一个div的显示和隐藏

发表评论

白嫖资源网一个免费投稿赚钱的网站,唯一认准官网 BP.XFJ.ME

联系站长 投稿赚钱