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 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 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
星际争霸任务指南——神族
2020/03/04 星际争霸
社区(php&amp;&amp;mysql)五
2006/10/09 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
js实现移动端轮播图
2020/12/21 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
基于python图像处理API的使用示例
2020/04/03 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
学生个人的自我评价分享
2013/11/05 职场文书
青蓝工程实施方案
2014/03/27 职场文书
大学生英语演讲稿
2014/04/24 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
武侯祠导游词
2015/02/04 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python