jquery和js实现对div的隐藏和显示方法

jQuery对div的显示和隐藏：

显示：

代码如下:

$("#id").show()

隐藏：

代码如下:

$("#id").show()

js对div的显示和隐藏：

div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白

代码如下:

style="visibility: none;"

document.getElementById("typediv1").style.visibility="hidden";//隐藏

document.getElementById("typediv1").style.visibility="visible";//显示

通过设置display属性可以使div隐藏后释放占用的页面空间，如下

代码如下:

style="display: none;"

document.getElementById("typediv1").style.display="none";//隐藏

document.getElementById("typediv1").style.display="";//显示

赞 (0)

相关推荐

  • 如何用js控制frame的隐藏或显示的解决办法

    index.htm 复制代码 代码如下: <html><head><meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId"

  • 原生js实现密码输入框值的显示隐藏

    原生js实现密码输入框值的显示隐藏

    本文实例为大家分享了js显示隐藏密码输入框值的具体代码,供大家参考,具体内容如下 直接贴上代码 <!DOCTYPE html> <html> <head> <title>password intput demo</title> </head> <style type="text/css"> body{ margin:0px; background-color: white; font-family: '

  • js点击页面其它地方将某个显示的DIV隐藏

    实现也很简单,但需要注意的是,在点击显示的事件中,需要做阻止事件冒泡的处理,否则就触发页面的点击事件了.但这样做也有一个缺点,即如果同一个页面中如果也有事件阻止冒泡,则不能隐藏DIV,所以在这样的事件中需要特殊处理下:自己调用隐藏下DIV(但正常来说这样的事件并不多): JS: 复制代码 代码如下: $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(function(e) {

  • AngularJS实现元素显示和隐藏的几个案例

    AngularJS实现元素显示和隐藏的几个案例

    案例一:控制html元素显示和隐藏有n种方法:html的hidden.css的display.jquery的hide()和show().bootstrap的.hide.今天的重点不是显示和隐藏,而是监听某个布尔变量值,自动改变元素显示和隐藏状态.监听函数.if判断.选择dom.设置dom,5行代码搞不定吧,而且毫无技术含量. 看代码: <!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8&qu

  • js设置控件的隐藏与显示的两种方法

    用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的"display"和"visibility"属性. 当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility="hidden"时控件不可见.不同的是"display"

  • js菜单点击显示或隐藏效果的简单实例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • vueJS简单的点击显示与隐藏的效果【实现代码】

    目前前端框架太多,接触过angular.ember,现在开始倒腾vue 此处用到v-if.v-else.v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性,感觉v-if好 感觉跟适合. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if.v-else.v-show&l

  • js实现的点击超链显示隐藏层

    点击链接,显示提示框,提示框里也有链接可点击. 鼠标移开链接或者移开提示框,提示框就隐藏. 下面这个我写的不能自适应,如果菜单左对齐,显示层能否自动在右边显示?应该怎样调整JS? test body {background-color: #fff; font-size:14px; color:#666;} #link-url a {display:block; height:30px; line-height:30px;width:100px; color:#666; text-decorati

  • javascript点击按钮实现隐藏显示切换效果

    javascript点击按钮实现隐藏显示切换效果

    本文实例分享了点击按钮实现隐藏和显示的切换代码,供大家参考,具体内容如下 效果图: 在不少应用中,都有这样的功能,点击同一个按钮可以实现一个元素的显示和隐藏的切换,下面就通过代码实例介绍一下如何实现此效果,代码如下: <html> <head> <meta charset="gb2312"> <title>隐藏和显示</title> <style type="text/css"> #thediv

  • javascript 控制 html元素 显示/隐藏实现代码

    1.编写js函数 <script type="text/javascript"> function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} function $(s){return document.getElementById(s);} </script> 2. 要显示/隐藏的html元素加上 id

随机推荐