Web开发中的显示与隐藏
2017-07-11 17:44
113 查看
大多数编程语言,在平开发过程中,都是会遇到一些特殊的场景,需要实现显示或者隐藏来达到我们想要的效果;然而实现的方式有多种,今天就写一下,希望可以帮到各位。
小编我学习前端1年了,特意写写博客来回顾一下。
方式1:
CSS的方式实现
1:设置样式:visibility: hidden/visible;隐藏和显示,
2:设置样式:display:none/(inline/block)隐藏和(内联元素显示/块级元素显示),
两者之间的区别:‘visibility 隐藏之后会占布局空间,而display则不会占布局空间。
方式2:
JS的方式来操作,有的时候可以根据点击事件来实现隐藏和显示
1:
2:
这两种方式,是以CSS的基础上,用JS来实现。
方式3:
JQuery的方式实现
前提:因为JQuery就是JS基础之上封装的一个工具,所以使用前得引入 jquery.js
如:
jquery版本 可根据自己的需求选择, 下载地址:jquery.js
目前我就弄了这几种,其他的方式还在学习中,后续补上。
小编我学习前端1年了,特意写写博客来回顾一下。
方式1:
CSS的方式实现
1:设置样式:visibility: hidden/visible;隐藏和显示,
2:设置样式:display:none/(inline/block)隐藏和(内联元素显示/块级元素显示),
两者之间的区别:‘visibility 隐藏之后会占布局空间,而display则不会占布局空间。
方式2:
JS的方式来操作,有的时候可以根据点击事件来实现隐藏和显示
1:
document.getElementById("id").style.visibility="visibe"; document.getElementById("id").style.visibility="hidden";
2:
document.getElementById("id").style.display="none"; document.getElementById("id").style.display="inline";
这两种方式,是以CSS的基础上,用JS来实现。
方式3:
JQuery的方式实现
$(function(){ $("btn").click(function(){ $("div").hide();/*隐藏*/ }); }); $(function(){ $("btn").click(function(){ $("div").show();/*显示*/ }); });
前提:因为JQuery就是JS基础之上封装的一个工具,所以使用前得引入 jquery.js
如:
<script type="text/javascript" src="../css/jquery-1.8.3.js" >
jquery版本 可根据自己的需求选择, 下载地址:jquery.js
目前我就弄了这几种,其他的方式还在学习中,后续补上。
相关文章推荐
- Web开发技术——JQuery4(隐藏和显示、淡入和淡出、滑动)
- Web开发之-JQuery 显示与隐藏
- Web开发中的显示与隐藏
- NodeJS+Express开发web,为什么中文显示为乱码
- mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案
- iOS开发之iOS9、iOS8隐藏app状态栏、 显示app状态栏 、 自由切换app状态栏的状态
- 在Android开发中显示和隐藏,大部分控件都有visibility这个属性,其属性有3个分别为“visible ”、“invisible”、“gone”
- [安卓开发] WebView网页隐藏屏蔽广告元素标签|去除底部广告
- Revit二次开发之“显示或隐藏视图中选中的元素”
- 显示隐藏文件或不显示隐藏文件 - iOS开发
- web开发中图片及日期格式显示问题
- 如何处理eclipse插件开发中的view的显示与隐藏
- ios开发中WKWebView在iOS11.0上部分链接显示不出来
- Ecology8二次开发:HTML表单隐藏行与显示行
- 安卓开发技术:监听软键盘的显示与隐藏
- WEB前端:03_hover切换(显示/隐藏)
- ios开发之webView.scalesPageToFit = YES后 加载页面遇见表格显示很小的解决方法
- iOS开发(1) WebView和HTML 显示
- WebView 关于如何隐藏地址栏,用WebView 来显示网页内容
- JavaWeb学习笔记——开发动态WEB资源(三)显示当前时间