大多数编程语言,在平开发过程中,都是会遇到一些特殊的场景,需要实现显示或者隐藏来达到我们想要的效果;然而实现的方式有多种,今天就写一下,希望可以帮到各位。

小编我学习前端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开发中的显示与隐藏的更多相关文章

  1. Web 开发中很实用的10个效果【附源码下载】

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...

  2. Web 开发中很实用的10个效果

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...

  3. [译]如何在Web开发中使用Python

    [译]如何在Web开发中使用Python 原文:HOWTO Use Python in the Web 摘要 这篇文档展示了Python如何融入到web中.它介绍了几种Python结合web服务器的方 ...

  4. 转:Web 开发中很实用的10个效果【附源码下载】

    原文地址:http://www.cnblogs.com/lhb25/p/10-useful-web-effect.html 在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多 ...

  5. 第123天:移动web开发中的常见问题

    一.函数库 underscoreJS _.template: <ol class="carousel-indicators"> <!--渲染的HTML字符串--& ...

  6. 彻底理解和解决移动WEB开发中CLICK点透问题

    在移动WEB开发中,有时候可能会出现点透问题,本文将围绕这个TAP点透问题,详细的讲述到底什么是点透,为什么会出现点透,如何避免出现点透,如果不可避免的出现了,如何解决解决移动WEB开发中CLICK点 ...

  7. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

  8. WEB开发中的字符集和编码

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  9. 今日推荐:10款在 Web 开发中很有用的占位图片服务

    设计网站时,将要使用的图像在一开始通常还不存在,这个时候布局是最重要的.然而,图像的尺寸通常是预先设置,实用一些占位图像可以帮助我们更好地预览和分析布局. 如今,有免费的占位图片自动生成工具可以使用, ...

随机推荐

  1. 关于gem包下载网站的说明

  2. H2 database 行相加-行列转换

    create or replace view view_acceptCompanyasselect *  from  (select WARNIGID,max(CASEWHEN(zhtablename ...

  3. Python之Rpyc模块

    简介 rpyc (Remote Python Call)为分布式计算环境提供了优良的基础平台.使用rpyc编写c/s结构程序,完全不用考虑老式的socket编程,现在只用编写简单的3.5行代码即可完成 ...

  4. PHP封装Excel表方法使用流程

    今天总结了一下Excel表的封装和导出使用,原理 经常使用与一些日常报表, 数据报表, 实现方法比较简单, 一次封装, 简单的方法调用,简单~ 废话不多说,直接入正题, 先说下重要的参数要记住的东西 ...

  5. Python处理Excel(转载)

    1. Python 操作 Excel 的函数库 我主要尝试了 3 种读写 Excel 的方法: 1> xlrd, xlwt, xlutils: 这三个库的好处是不需要其它支持,在任何操作系统上都 ...

  6. 极重要基础命令三剑客加find

    find  -type:以文件类型查找 -name:以文件名查找 ! 取反 sed命令实战: sed -n “2p” oldboy.txt 打印第二行 sed -n "1,2p" ...

  7. cd

    从当前目录切换到目标目录 cd [目标目录]   切换到用户主目录 cd cd~   切换到根目录 cd /   切换到上级目录 cd .. cd ../ cd ..//   切换到上级目录的父目录 ...

  8. Android动画深入分析

    动画分类 Android动画可以分3种:View动画,帧动画和属性动画:属性动画为API11的新特性,在低版本是无法直接使用属性动画的,但可以用nineoldAndroids来实现(但是本质还是vii ...

  9. Python封装:实现输出一个文件夹下所有各个文件的地址存为列表集合内——Jason niu

    def getAllImages(folder): assert os.path.exists(folder) assert os.path.isdir(folder) imageList = os. ...

  10. Spring的事务机制

    ---恢复内容开始--- 内定的=>(只需要在xml 中添加一个bean) 在xml 中添加 <bean id="listener" class="com.t ...