Javascript与jQuery方法的隐藏与显示


Posted in Javascript onJanuary 19, 2015

示例代码很简单,直接奉上,就不多废话了

<html> 

<head> 

<title>denotoggle</title> 

<style> 

#box { 

    width: 100px; 

    height: 100PX; 

    background-color: #ddd 

} 

.show { 

    visibility: hidden; 

} 

</style> 

<script src="jquery/1.8.2/jquery.min.js"></script> 

<!-- //java script方法 --> 

<script type="text/javascript"> 

    window.onload = function() { 

        function toglemain() { 

            var obj = document.getElementById("box"); 

            if (obj.className == "") { 

                obj.className = "show"; 

            } else { 

                obj.className = ""; 

            } 

        } 

        var clickbutton = document.getElementById("toggle"); 

        clickbutton.onclick = toglemain; //OnClick方法与Click事件 点击一下Button,实际上是先执行OnClick方法,但是问什么,同时还出发了Click事件呢?这是因为,OnClick方法内部触发了Click事件。 

    } 

</script> 

<!-- //jQuery Toggle方法 --> 

<script type="text/javascript"> 

    $(document).ready(function() { 

        $(".btn1").click(function() { 

            /* $("p#box").toggle(); */ 

            $("#box").toggleClass("show"); 

        }); 

    }); 

</script> 

</head> 

<body> 

    <div id="box"></div> 

    <button id="toggle">javascript toggle</button> 

    <button class="btn1">jQuery Toggle</button> 

</body> 

</html>

小伙伴们是否了解清楚了Javascript与jQuery方法的隐藏与显示的方法了呢,需要的小伙伴自己来拿走吧。

Javascript 相关文章推荐
JavaScript 给汉字排序实例代码
Jun 28 Javascript
JavaScript 继承详解(三)
Jul 13 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
jQuery中trigger()方法用法实例
Jan 19 #Javascript
jQuery的one()方法用法实例
Jan 19 #Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 #Javascript
jQuery中bind()方法用法实例
Jan 19 #Javascript
jQuery中on()方法用法实例
Jan 19 #Javascript
jQuery学习笔记之创建DOM元素
Jan 19 #Javascript
jQuery学习笔记之2个小技巧
Jan 19 #Javascript
You might like
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
《再见了,亲人》教学反思
2014/02/26 职场文书
班长演讲稿范文
2014/04/24 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书