如题，代码奉上。

  1. <html>
  2. <head>
  3.  
  4. <title>denotoggle</title>
  5.  
  6. <style>
  7. #box {
  8.     width: 100px;
  9.     height: 100PX;
  10.     background-color: #ddd
  11. }
  12.  
  13. .show {
  14.     visibility: hidden;
  15. }
  16. </style>
  17. <script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
  18. <!-- //java script方法 -->
  19. <script type="text/javascript">
  20.     window.onload = function() {
  21.         function toglemain() {
  22.             var obj = document.getElementById("box");
  23.             if (obj.className == "") {
  24.                 obj.className = "show";
  25.             } else {
  26.                 obj.className = "";
  27.             }
  28.         }
  29.         var clickbutton = document.getElementById("toggle");
  30.         clickbutton.onclick = toglemain; //OnClick方法与Click事件 点击一下Button，实际上是先执行OnClick方法，但是问什么，同时还出发了Click事件呢？这是因为，OnClick方法内部触发了Click事件。
  31.     }
  32. </script>
  33. <!-- //jQuery Toggle方法 -->
  34. <script type="text/javascript">
  35.     $(document).ready(function() {
  36.         $(".btn1").click(function() {
  37.             /* $("p#box").toggle(); */
  38.             $("#box").toggleClass("show");
  39.         });
  40.     });
  41. </script>
  42.  
  43. </head>
  44.  
  45. <body>
  46.     <div id="box"></div>
  47.     <button id="toggle">javascript toggle</button>
  48.     <button class="btn1">jQuery Toggle</button>
  49. </body>
  50. </html>

另求大家补充个jQuery的addClass与remove实现隐藏显示的代码。

Javascript与jQuery方法的隐藏与显示的更多相关文章

  1. jQuery控制元素隐藏和显示

    1.jQuery隐藏和显示效果 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click(functio ...

  2. jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画

    jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...

  3. JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）

    JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...

  4. Unity3D方法来隐藏和显示对象

    Unity3D作 在使用unity3d开发游戏的过程中.我们经常会遇到须要隐藏或者显示的操作,针对这一点,以下做了一些总结. 一.设置Renderer状态 在游戏的开发中,全部可以被渲染的物体都包括有 ...

  5. jQuery效果之隐藏与显示、淡入淡出、滑动、回调

    隐藏与显示 淡入淡出 滑动效果

  6. Javascript或jQuery方法产生任意随机整数

    方法1:javascritp方法 1 2 3 4 5 6 //随机数    function diu_Randomize(b,e){        if(!b && b!=0 || ! ...

  7. 简单地做一下“回到顶部”按钮，用jQuery实现其隐藏和显示

    1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> ...

  8. jquery关于表格隐藏和显示问题

    1. 关于指定表格指定列隐藏显示 $(":checkbox[name*=month]").each(function(){ if(!$(this).attr("check ...

  9. 【记录】jquery动态控制div隐藏或者显示

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible'); //true为显示,false为隐藏 $("#id").i ...

随机推荐

  1. 语法解析 rs.next()

    ResultSet.next()方法将指针从当前位置下移一行.ResultSet 指针最初位于第一行之前:第一次调用 next 方法使第一行成为当前行:第二次调用使第二行成为当前行,依此类推. 如果新 ...

  2. “全栈2019”Java第三十三章：方法

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  3. Struts2框架里面action与前端jsp页面进行交互路径问题---》一个对话框里面有很多超链接，进行相应的跳转

    一个对话框里面有很多超链接,右边是点击超链接跳转到的相应页面(在一个页面上就相当于点击该超链接时候,就把该简短页面置顶):这个问题困扰我两天:还请大神给我解决,也没有解决,我仔细对比了相关路径,后面添 ...

  4. BFC概念和作用，触发条件

    1.概念,全称是block format context,块级格式化上下文 2.触发条件 根元素 float属性不为none position为absolute或fixed display为inlin ...

  5. POJ-2387-Til the Cows Come Home（最短路）

    Til the Cows Come Home Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 72844   Accepted ...

  6. 数据结构65：快速排序算法（QSort，快排）

    上节介绍了如何使用起泡排序的思想对无序表中的记录按照一定的规则进行排序,本节再介绍一种排序算法——快速排序算法(Quick Sort). C语言中自带函数库中就有快速排序——qsort函数 ,包含在 ...

  7. editplus5注册码

    注册码:Vovan 3AG46-JJ48E-CEACC-8E6EW-ECUAW

  8. [转] kerberos安装配置与使用

    [From] https://blog.csdn.net/lovebomei/article/details/79807484 1.Kerberos协议: Kerberos协议主要用于计算机网络的身份 ...

  9. java数据结构和算法学习笔记

    第一章 什么是数据结构和算法 数据结构的概述 数据结构是指 数据再计算机内存空间或磁盘空间中的组织形式 1.数据结构的特性 数据结构 优点 缺点 数组 插入快,如果知道下标可以快速存取 查找和删除慢 ...

  10. Ubuntu定时任务设置

    设置很简单,但如果误入歧途,会耽误很多时间 步骤如下: 1. 以root执行:vi /etc/crontab 2. 在文件最后添加cron配置(每天凌晨四点执行,并将日志输出到/data/cron.l ...