1. 程式人生 > >jQuery---用jq實現控制元件的顯示和隱藏

jQuery---用jq實現控制元件的顯示和隱藏

因為發現這個功能用的比較頻繁,所以分享一下:
先說一下,隱藏控制元件有兩種方式:style="visibility: hidden;"style="display: none;",個人比較喜歡使用style="display: none;",因為style="visibility: hidden;"雖然隱藏了控制元件,但還是會保留隱藏元素的空間
1.

//用jq給控制元件加一個css樣式
$("#id").css('display','block'); //顯示
$("#id").css('display','none'); //隱藏

解析:直接加css樣式

//先直接寫好兩個css樣式
.hidden{
    display:none;
}
.shown{
   dispaly:block;
}
//然後用jq把寫好樣式加到控制元件上
$("#id").removeClass("hidden").addClass("shown");//先移除掉hidden樣式,再新增shown樣式

解析:一定記得先刪除原來css樣式,再新增新的css樣式
3.

//用jq自帶的方法
$("#id").show(); //顯示
$("#id").hide(); //隱藏

解析:這個最好用…