JQuery DIV dynamic hide and show method

1. If it is hidden while loading:

<head>
<script language="javascript">
function HideWeekMonth()
{
$("#tt1").hide();
$("#tt2").hide();
}
</script>
</head>
<body onLoad="HideWeekMonth()">
</body>

Using jquery can easily realize the function of showing and hiding. For example, to control the display and hiding of div, you can do it in one sentence. Please see the instructions below.

$("#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() toggles the visible state of the element. If the element is visible, switch to hidden; if the element is hidden, switch to visible.

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

How to check if an element is hidden in jquery

The first: use CSS properties

 
  var display =$('#id').css('display');
if(display == 'none'){
   alert( "I was discovered by you, I was hidden!" );
} 
 

The second: use jquery built-in selector

Suppose our page has such a tag,

<div id="test">
<p>For testing only</p>
</div>

Then, we can use the following statement to determine whether the tag with id "test" is hidden:

 
  if ($("#test").is(":hidden")){...} // The premise is that the jQuery library has been imported 
 

In this way, we can easily determine whether an element is hidden and animate it according to its state, such as:

 
  if($("#test").is(":hidden")){
       $( "#test").show();     // If the element is hidden, show it 
} else {
      $( "#test").hide();      // If the element is visible, hide it 
} 
 

jQuery determines whether an element is displayed or not

var node = $ ('# id');

first spelling

if(node.is(':hidden')){ //If the node is hidden, show the node element, otherwise hide

　　node.show();　

}else{

　　node.hide ();

}

The second way of writing

if(!node.is(':visible')){ //If the node is hidden, show the node element, otherwise hide

　　node.show();　

}else{

　　node.hide ();

}

if(node.is(':visible')){ //If the node is displayed, hide the node element, otherwise display

　　node.hide ();

}else{

　　node.show();

}

jQuery determines whether an object is shown or hidden

js code

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

js code

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

js code

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

js code

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

js code

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

js code

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

Summary of show and hide methods of div

JQuery DIV dynamic hide and show method

How to check if an element is hidden in jquery

Guess you like