div的顯示隱藏方法匯總


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   */  
}  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM