·设为首页 ·加入收藏 ·简体中文 ·繁体中文 沧州市2015年中考成绩查询
当前位置:伟德体育投注 > 网页配色 >

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

文章来源:转载    点击数:    更新时间:2016-02-22

在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()哦,这个就不介绍了。

教育新闻
信息公开
设为首页 | 加入收藏 | 简体中文 | 繁体中文 | 网站地图