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://chengdu.cdxwcx.cn/article/dsigddc.html