87,907
社区成员
发帖
与我相关
我的任务
分享关于隐藏显示层的问题！
我现在有 4个div class名称一样 我想用js 实现 鼠标放到哪个上面 其他的隐藏，现在我就是不明白 在class一样的情况下怎么实现，不用ID 不用name 因为我需要在一个 页面放 放许多这样的 4个div！谁来指点一下
...全文
请发表友善的回复…
发表回复
gf05011 2012-07-06
- 打赏
- 举报
<style type="text/css">
.div1
{
margin:10px;
width:50px;
border:1px solid red ;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".div1").bind("mouseover",
function()
{
$(this).siblings("div").each(function()
{
$(this).toggle();//切换可视状态
}
);
}
);
});
</script>
<title>无标题文档</title>
</head>
<body style="overflow:hidden;">
<h4>div显示/隐藏</h4>
<div class="div1">div1</div>
<div class="div1">div2</div>
<div class="div1">div3</div>
<div class="div1">div4</div>
mbn1234 2012-07-06
- 打赏
- 举报
俩高手，谢谢 我给this 忘了！
JJYY0088 2012-07-06
- 打赏
- 举报
用jquery 实现很简单，不过不知道你的div怎么布局的，因为你隐藏了其他div，只显示一个， 布局会发生改变。下面的例子我使用了position进行定位，所以布局不会变化
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#divList{position:relative;}
.divClass{ width:300px; height:100px; background:orange; float:left; margin:0 10px; position:absolute}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//使用position定位div，避免发生布局变化
$("#divList div.divClass").each(function(){
var i = $(this).index();
$(this).css({"left":i*310});
})
//div隐藏显示
$("#divList div.divClass").hover(function(){
$(this).siblings().fadeOut(); //鼠标经过
},function(){
$("#divList div.divClass").fadeIn(); //鼠标离开
})
})
</script>
</head>
<body>
<div id="divList">
<div class="divClass">1 </div>
<div class="divClass">2 </div>
<div class="divClass">3 </div>
<div class="divClass">4 </div>
</div>
</body>
</html>
d945332077 2012-07-06
- 打赏
- 举报
你是否知道有个this这个东西？？？？？？？好吧 我给你写个JQUERY
$(".className").mouseover(function(
$(".className").hide();
$(this).show();
));
你的明白？？？？？
$(".className").mouseover(function(
$(".className").hide();
$(this).show();
));
你的明白？？？？？
