井井客

搜索

实用的JQ遍历siblings做的遮罩显示内容

简单实用的JQ遍历应用,通过siblings来控制同胞元素,配合样式,达到当前元素显示全内容,而同胞元素仅显示标题的效果。

实用的JQ遍历siblings做的遮罩显示内容

代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>实用的JQ遍历siblings做的遮罩显示内容</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style type="text/css">
.tabDl dl { width:500px; line-height:30px; font-size:14px;}
.tabDl dl dt { padding:0 10px; background:#e8e8e8; cursor:pointer;}
.tabDl dl dd { display:none;}
.tabDl dl.on dd { display:block;}
</style>
</head>
<body>
<div class="tabDl">
	<dl>
		<dt>这是一个第1个标题</dt>
		<dd>这是一个第1段内容</dd>
	</dl>
	<dl>
		<dt>这是一个第2个标题</dt>
		<dd>这是一个第2段内容</dd>
	</dl>
	<dl>
		<dt>这是一个第3个标题</dt>
		<dd>这是一个第3段内容</dd>
	</dl>
	<dl>
		<dt>这是一个第4个标题</dt>
		<dd>这是一个第4段内容</dd>
	</dl>
	
</div>

<script>
$('.tabDl dl').hover(function(){
	$(this).addClass('on').siblings().removeClass('on');
});
</script>
</body>
</html>

实用的JQ遍历siblings做的遮罩显示内容示例

JQ的部分只有下面一小段:

$('.tabDl dl').hover(function(){
	$(this).addClass('on').siblings().removeClass('on');
});

意思也很好理解,就是当dl鼠标移上去时,添加on样式,同时JQ遍历siblings它的同胞元素移除on样式。

总之这是一段比较实用且简单的JQ代码。

文章TAG:JQ

作者:井井客整理来源:原创
本文标题:实用的JQ遍历siblings做的遮罩显示内容
本文链接:/c/2590.html

上一篇:PS设置时间轴面板快捷键
下一篇:Jquery操作表单select下拉菜单切换显示内容

文章分类

相关阅读

随便看看