Web开发中的显示与隐藏
来源:互联网 发布:歌莉娅淘宝官方旗舰店 编辑:程序博客网 时间:2024/06/16 13:08
大多数编程语言,在平开发过程中,都是会遇到一些特殊的场景,需要实现显示或者隐藏来达到我们想要的效果;然而实现的方式有多种,今天就写一下,希望可以帮到各位。
小编我学习前端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
目前我就弄了这几种,其他的方式还在学习中,后续补上。
阅读全文
0 0
- Web开发中的显示与隐藏
- css与jq中的显示与隐藏
- iOS开发中的键盘显示和隐藏
- web开发中的显示图片
- android EditText中的密码显示与隐藏
- Macbook中的文件显示与隐藏方法
- 如何处理eclipse插件开发中的view的显示与隐藏
- iOS开发 之 navigationbar 与 tabbar 的显示与隐藏
- java web开发中的中文显示问题
- 控制Swing中的ToolTip的显示与隐藏
- 如何显示与隐藏Sharepoint列表中的指定字段
- iOS开发——状态栏隐藏与显示statusBar
- Xamarin.Android 开发控件显示与隐藏区别
- div隐藏与显示
- DIV显示与隐藏
- div 显示与隐藏
- div 显示与隐藏
- div 显示与隐藏
- Android应用分配的内存空间
- 【二叉树】合并二叉树
- Markdown学习之(3)-插入图片
- Mybatis 出现The error may involve defaultParameterMap
- java中对配置文件properties读取
- Web开发中的显示与隐藏
- 磁盘主分区转换为逻辑分区
- mysql 赋权设置
- HDU 4370 0 or 1(最短路)
- pytest框架执行用例例子
- BadgeView
- 国内外物联网平台特点以及开发语言整理
- LInux:shell 命令:字符串截取
- Unity性能优化—声音优化