jquery 控制div隐藏各种方法总结

在jquery中显示隐藏div层的方法有很多,一种常用的就是动态判断给div增加display属性来控制,还有直接使用hide,show来操作,下面我来给大家介绍jquery中显示隐藏层实例应用。

方法一,利用att根据判断增加class来实现div显示隐藏

原理

我们获取用户点击事件再利用hasClass判断当前是我们定义的隐藏样式不,如果是我们就去了,不是就加上,代码如下

css

代码如下 复制代码

.listhide{ display:none;}

html

代码如下 复制代码

<a href="javascript:void(0);" onClick="ajaxlist(1);" class="xxjd" id="xxjd1">点击我看看</a>

<tr class="listhide" id="aadd1">
<td colspan="5" ><div class="tabxq">点击我们显示再点击我僦隐藏了</div></td>
</tr>

jquery代码

代码如下 复制代码

<script language="javascript">
function ajaxlist(id){

if ($("#aadd"+id).hasClass("ychidden"))
{
$("#aadd"+id).removeClass("ychidden");
}
else
{
$("#aadd"+id).attr("class", "ychidden");
}

}
</script>

方法二利用 hide(),show()实现隐藏与显示

这是jquery自带的方法操作很简单,如

html代码

代码如下 复制代码

<div class=xxjd > 点击我看看</div>
<div id=aa>www.111cn.net原创文章转注明来源</div>
<div class=xxjdx > 点击我试一下</div>

隐藏实例

代码如下 复制代码

$(".xxjd").click(function(){
$('#aa').hide();
})

显示实例

代码如下 复制代码

$(".xxjdx").click(function(){
$('#aa').show();
})

方法三,利用fadeToggle

代码如下 复制代码

$(".xxjd").click(function(){
$("#aa").fadeToggle();
})

好了各种各们的jquery隐藏显示div都定了,主要用到hide,show,fadeToggle同时还有taggle()哦,这个就不介绍了。

分类:默认分类 时间:2015-03-04 人气:2
本文关键词:
分享到:

相关文章

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.078 (s). 10 q(s)