jquery怎么實現點擊一個按鈕控制一個div的顯示和隱藏

示例html

創新互聯公司專業為企業提供大峪網站建設、大峪做網站、大峪網站設計、大峪網站制作等企業網站建設、網頁設計與制作、大峪企業網站模板建站服務，十年大峪做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

div?class="abc"?style="display:none"/div

input?type="button"?class="but"?/

最簡單的方法：

script

$(document).ready(function(e)?{

$(".but").click(function(e)?{

$(".abc").toggle();

});

});

/script

toggle() 的作用就是當對象是顯示的就隱藏，當是隱藏的則顯示。

------

如果你除了顯示和隱藏之外還需要同時實現其他功能的話，可以這樣：

script

$(document).ready(function(e)?{

$(".but").click(function(e)?{

if(?$(".abc").hasClass("show")?){

//?執行隱藏

$(".abc").hide().removeClass("show");

//?其他

}else{

//?顯示

$(".abc").show().addClass("show");

}

});

});

/script

這里通過自定義一個 class : show 來判斷 div 是顯示或隱藏

hasClass() 是否存在某個class

hide() 隱藏對象

show() 顯示對象

removeClass() 移除一個class

addClass() 添加一個class

除此，還可以通過jquery設置這個 div 的 css : display:none/block 來實現隱藏/顯示

如何用jquery彈出 一個Div，讓其在文本框下面顯示

div input id='input1' type='text' /div

div ?id='b' style='position:absolute;left:20px;top:20px;display='none''/div//自己調整left和top的值將下面的div定位在上一個div的正下方

引如jquery文件

script

$(function(){

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

$("#input1").focus(function(){

$("#b").slideDown("slow");

});

$("#input1").blur(function(){

$("#b").slideUp("slow");

});

});

/script

jQuery中顯示和隱藏div的幾種方法

$("div").css('display','none');//隱藏

$("div").css('display','block');//顯示

$("div").hide();//隱藏

$("div").show();//顯示

$("div")[0].style.display = 'none';//隱藏

$("div")[0].style.display = 'block';//隱藏

$("div").toggle()切換元素的可見狀態。如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。

jquery顯示和隱藏div特效實例

$(document).ready(

function(){});

function

hiden(){

$("#divObj").hide();//hide()函數,實現隱藏,括號里還可以帶一個時間參數(毫秒)例如hide(2000)以2000毫秒的速度隱藏,還可以帶slow,fast

}

function

slideToggle(){

$("#divObj").slideToggle(2000);//窗簾效果的切換,點一下收,點一下開,參數可以無,參數說明同上

}

function

show(){

$("#divObj").show();//顯示,參數說明同上

}

function

toggle(){

$("#divObj").toggle(2000);//顯示隱藏切換,參數可以無,參數說明同上

}

function

slide(){

$("#divObj").slideDown();//窗簾效果展開

}

分享名稱：jquery讓div顯示,網頁上有5個div元素,如何使用jquery來選擇它們
網站鏈接：http://vcdvsql.cn/article12/dsigddc.html

成都網站建設公司_創新互聯，為您提供品牌網站制作、關鍵詞優化、云服務器、外貿建站、網站設計、手機網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯