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

1. 如果在载入是隐藏：

<head>

<script language="javascript">

function HideWeekMonth()

{

$("#tt1").hide();

$("#tt2").hide();

}

</script>

</head>

<body onLoad="HideWeekMonth()">

</body>

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

$("#id").show()表示display:block,

$("#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()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

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

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

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

第一种：使用CSS属性

var display =$('#id').css('display');

if(display == 'none'){

   alert("被你发现了，我是隐藏的啦！");

}

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

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

<div id="test">

<p>仅仅是测试所用</p>

</div>

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

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

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

if($("#test").is(":hidden")){

       $("#test").show();    //如果元素为隐藏,则将它显现

}else{

      $("#test").hide();     //如果元素为显现,则将其隐藏

}

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. 使用Android-Debug-Database 在浏览器中查看App的数据库

    使用参考:http://www.jianshu.com/p/89ccae3e590b源码地址:https://github.com/amitshekhariitbhu/Android-Debug-Da ...

  2. 阻止除root外的其他用户登录

    在对系统进行某些更新时,你可能不希望用户登录,这时可以使用/ e t c / n o l o g i n文件,大多数系统都提供这个文件.一旦在/ e t c目录中使用t o u c h命令创建了一个名 ...

  3. explian使用介绍

    1).id列数字越大越先执行,如果说数字一样大,那么就从上往下依次执行,id列为null的就表是这是一个结果集,不需要使用它来进行查询. 2).select_type列常见的有:A:simple:表示 ...

  4. 雨林木风ghost win7 64位快速装机版V2016年

    雨林木风ghost win7 64位快速装机版V2016年2月 系统下载:http://www.xitongma.com 系统概述 雨林木风ghost win7 64位旗舰装机版自动无人值守安装,采用 ...

  5. 数据库web项目对数据库的操作

    1.0.JSTL与jsp实现对数据库的操作 MySql 数据库: create database if not exists CommodityDB; use CommodityDB; drop ta ...

  6. k8s 基础概念和术语

    Master k8s里的master指的是集群控制节点,每个k8s集群里需要有一个Master节点来负责整个集群的管理和控制,基本k8s所有控制命令都发给它,它负责整个具体的执行过程,后面执行操作基本 ...

  7. java B转换KB MB GB TB PB EB ZB

    public static String readableFileSize(long size) { if (size <= 0) { return "0"; } final ...

  8. shell脚本，当用sed删除某一文件里面的内容时，并追加到同一个文件会出现问题。

    shell脚本,当用sed删除某一文件里面的内容时,并追加到同一个文件会出现问题.因为初始文件和写入文件是一个文件这是失败的.需要追加到另一个文件,然后再用mv进行操作.[root@localhost ...

  9. C++系统学习之五：表达式

    表达式由一个或多个运算对象组成,对表达式求值将得到一个结果.字面值和变量是最简单的表达式,其结果就是字面值和变量的值.把一个运算符和一个或多个运算对象组合起来可以生成较复杂的表达式. 基础 1.基本概 ...

  10. hihoCode-1043-完全背包

    我们定义:best(i,x)代表i件以前的物品已经决定好选择多少件,并且在剩余奖券x的情况下的最优解. 我们可以考虑最后一步,是否再次选择i物品,在不超过持有奖券总额的情况下.上面的第二个式子的k是大 ...