JQuery DIV 动态隐藏和显示的方法

1. 如果在载入是隐藏：

  1. <head>
  2. <script language="javascript">
  3. function HideWeekMonth()
  4. {
  5. $("#tt1").hide();
  6. $("#tt2").hide();
  7. }
  8. </script>
  9. </head>
  10. <body onLoad="HideWeekMonth()">
  11. </body>

使用jquery可以很容易实现显示隐藏的功能，比如要控制div的显示与隐藏，一句话就搞定了，请看下面使用说明。

  1. $("#id").show()表示display:block,
  2. $("#id").hide()表示display:none;

$("#demo").attr("style","display:none;");//隐藏div

$("#demo").attr("style","display:block;");//显示div

$("#demo").css("display","none");//隐藏div

$("#demo").css("display","block");//显示div

$("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

  1. $("#id").css('display','none');
  2. $("#id").css('display','block');

jquery判断元素是否隐藏的多种方法

第一种：使用CSS属性

  1. var display =$('#id').css('display');
  2. if(display == 'none'){
  3.    alert("被你发现了，我是隐藏的啦！");
  4. }

第二种：使用jquery内置选择器

假设我们页面有这么个标签,

  1. <div id="test">
  2. <p>仅仅是测试所用</p>
  3. </div>

那么,我们可以用以下语句来判断id为"test"的标签是否隐藏:

 
  1. if($("#test").is(":hidden")){...} //前提是已经将jQuery的库导进来了

这样,我们就能够很简单地判断一个元素是否隐藏,并根据其状态来设置动画,比如:

  1. if($("#test").is(":hidden")){
  2.        $("#test").show();    //如果元素为隐藏,则将它显现
  3. }else{
  4.       $("#test").hide();     //如果元素为显现,则将其隐藏
  5. }

jQuery判断元素是否显示 是否隐藏

var node=$('#id');

第一种写法

 
if(node.is(':hidden')){　　//如果node是隐藏的则显示node元素，否则隐藏

　　node.show();　

}else{

　　node.hide();

}

第二种写法

 
if(!node.is(':visible')){　　//如果node是隐藏的则显示node元素，否则隐藏

　　node.show();　

}else{

　　node.hide();

}

if(node.is(':visible')){　　//如果node是显示的则隐藏node元素，否则显示

　　node.hide();

}else{

　　node.show();

}

jQuery判断对象是否显示或隐藏

Js代码

 
// jQuery("#tanchuBg").css("display")  
// jQuery("#tanchuBg").is(":visible")  
// jQuery("#tanchuBg").is(":hidden")  

Js代码

$(element).is(":visible") // Checks for display:[none|block], ignores visible:[true|false]  

Js代码

 
$('element:hidden')  
$('element:visible')  

Js代码

$(".item").each(function()  
{  
    if ($(this).css("visibility") == "hidden")  
    {  
        // handle non visible state  
    }  
    else  
    {  
        // handle visible state  
    }  
})  

Js代码

ar isVisible = $('#myDiv').is(':visible');  
var isHidden = $('#myDiv').is(':hidden');  

Js代码

if( $(this).css("display") == 'none' ){  
  
    /* your code here*/  
}  
else{  
  
    /*  alternate logic   */  
}  

div的显示隐藏方法汇总的更多相关文章

  1. jQuery事件-div的显示隐藏及鼠标的移入移出

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

    <!doctype html><html> <head> <meta charset="utf-8"> <title>j ...

  3. 实现对div的显示隐藏

    jQuery对div的显示和隐藏: 显示: 复制代码 代码如下:$("#id").show() 隐藏: 复制代码 代码如下: $("#id").show() j ...

  4. 让几个横向排列的浮动子div居中显示的方法

    div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...

  5. winfrom 控件的显示隐藏方法

    使用Panel作为容器 Panel2.Visible = true; //显示 Panel1.Visible = false; //隐藏

  6. jq与js的写法，示例回到顶部div滚动显示隐藏

    jq:var top_icon = $('.top_icon')[0]; id写法$('#id'),类写法$('.class'),标签写法$('div') 如:join=document.getEle ...

  7. 移动端右侧导航 显示隐藏js

    transform与fixed影响 html按钮 <span class="nav-btn"></span> <span class="cl ...

  8. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  9. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

随机推荐

  1. js实现文本框验证和实现小数的加减乘除

    <script type="text/javascript"> //加法 var m=accAdd(1.22,1.22); //减法 var m1=accSub(1.2 ...

  2. hihocoder1776 序列

    思路: 考虑从左至右依次向每个位置放置数字,对于第i个位置,以i为结尾的i个前缀和模P是不能相等的(因为不存在和为P的倍数的子串),所以第i个位置只能放置P - i个不同的数字.则答案就是(P - 1 ...

  3. IE6下png背景不透明——张鑫旭博客读书笔记

    从今天开始跟着大牛张鑫旭的步伐,每天进步一点点 问题:IE6不支持png背景透明或半透明 一.可解决的方法 补充:css滤镜主要是用来实现图像的各种特殊效果.(了解) css滤镜的标识符是“filte ...

  4. react之——render prop

    在react “从上至下的数据流原则” 背景下,常规的消息传递机制就是通过prop属性,把父级数据传递给子级,这样一种数据流通模式决定了——数据的接收方子组件要被”硬植入“进数据的数据的给予方父组件, ...

  5. Android笔记--Bitmap

    Android | Bitmap解析 Android中Bitmap是对图像的一种抽象.通过他可以对相应的图像进行剪裁,旋转,压缩,缩放等操作.这里循序渐进的一步步了解Bitmap的相关内容. 先了解B ...

  6. MySQL存储引擎问题

    一.什么是存储引擎 数据库就是一种对数据进行管理和存储的软件,而它能够实现存储和管理数据的原因就是因为存储引擎的存在,存储引擎就是对存储数据.为存储的数据建立索引以及更新.查询数据等技术的实现方法:在 ...

  7. （一）mybatis之JDBC介绍

    前言:为什么在学mybatis之前要先了解JDBC呢?因为mybatis是以ORM模型为中心思想的框架,而所有的ORM模型都是基于JDBC进行封装的,不同的ORM模型对JDBC封装的强度是不一样的. ...

  8. firstElectron_web5 安装

    小娜 搜 cmd 右键 管理员运行 1.装全局 这样 不用每次都下载 因为包挺大的 还有用cnpm 要不太慢 cnpm install electron --save-dev --save-exact ...

  9. 《3+1团队》第八次团队作业：Alpha冲刺

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 3+1团队 团队博客地址 https://home.cnblogs.com/u/3-1group ...

  10. 用Kotlin开发android平台语音识别，语义理解应用（olamisdk）

    Kotlin是由JetBrains创建的基于JVM的编程语言,IntelliJ正是JetBrains的杰作,而android Studio是 基于IntelliJ修改而来的.Kotlin是一门包含很多 ...