怎么用js显示隐藏div

怎么用js来显示或隐藏一个div?很简单,下面一起来看一下。

操作方法

  • 01

    首先我们创建一个div,和一个按钮。用按钮的点击来控制div的显示或隐藏。

  • 02

    添加一个样式名叫hide的样式,主要是设置display=none,即隐藏。

  • 03

    接着用js来实现显示,隐藏的功能。我们用Jquery的hasClass方法来判断div是否有hide样式,有则删除这个样式,即显示div。如果没有,则添加一个hide的样式,即隐藏div。

  • 04

    运行页面,我们点击按钮,如果div是正在显示的,点击后就会隐藏,如果是隐藏状态的,点击后就会显示。

(0)

相关推荐

  • js显示隐藏div

    如何使用JavaScript设置一个div点击从显示变为隐藏,再次点击从隐藏变为显示呢?实现的代码很简单,点击时先判断div是否是显示,如果div是显示就把div设置为隐藏,否则就变为显示. js代码 ...

  • JS如何控制DIV的显示和隐藏

    我们进行网页开发的时候,经常需要运用JS去控制某个div的显示或者隐藏.下面小编通过实例教大家如何实现这种功能. 操作方法 01 打开Sublime Text编辑器,新建一个HTML文档,注意一定要设 ...

  • jQuery如何显示和隐藏div

    jQuery是js中一款很强大的库,jQuery封装了很多js方法,那么jQuery如何显示和隐藏div呢?其实这只是一个很简单的小功能.下面小编就来为大家介绍一下jQuery如何显示和隐藏div,一 ...

  • jquery的toggle实现点击按钮时显示/隐藏图片

    下面是使用html+css+jquery来完成点击按钮时显示/隐藏图片的功能,主要用到了jquery中的一个toggle()方法. 操作方法 01 首先创建一个html文件,然后在body下创建一个d ...

  • dreamweaver显示隐藏元素行为的操作方法

    一、Dreamweaver显示-隐藏元素行为 1. 在网页中插入AP Div,也就是常说的层。 2. 选择<body>标签、某个链接(<a>)标签或者选择一个AP元素。 3. ...

  • win7与xp系统中如何显示隐藏的文件

    隐藏的文件夹怎么显示?相信很多电脑新手朋友都会问这个问题,比如我们一般可以看到C盘系统盘里的系统文件是隐藏的,那么如何查看已经隐藏了的文件或曾经自己将文件夹设置为隐藏,要查看,怎么让隐藏文件显示出来呢 ...

  • 在Word2010文档中设置和显示隐藏文字的图文方法教程

    用户在使用Word2010编辑文档的过程中,常常需要将Word文档中的特定文字设置为隐藏文字,以实现保密效果。本篇教程介绍在Word2010文档中设置和显示隐藏文字的方法。 1.设置隐藏文字 用户可以 ...

  • 在桌面显示/隐藏输入法及输入法热键的设置

    在实际应用过程中,可以根据需要设置在桌面显示/隐藏输入法,也可以为输入法设置热键。 1.显示/隐藏输入法 在应用电脑的过程中,如果发现任务栏上的输入法不见了,该怎么办呢?拔示输入法的方法如下。 第1步 ...

  • win7 64位系统中为右键菜单添加显示隐藏系统文件和文件扩展名的方法

    win7 64位右键添加显示隐藏系统文件和文件扩展名 一、新建一个文档,输入如下代码并另存为:SuperHidden.reg 01 REGEDIT4 02 [HKEY_CLASSES_ROOT/Dir ...