当前位置: 代码迷 >> Java Web开发 >> jquery有关问题。有图
  详细解决方案

jquery有关问题。有图

热度:177   发布时间:2016-04-17 00:34:08.0
jquery问题。有图


如图,我鼠标经过三个文本后,后面三个都显示了。我想只让他显示一个。
就是当鼠标 点击 新浪时, 后面只显示 我能去新浪。该怎么实现?


<html>
<head>

<script type="text/javascript" src="E:\jsp\jquery.js"></script>
<script type="text/javascript">  
$(document).ready(function(){
$(".flip1").mouseover(function(){
  $(".panel").slideToggle("100");
  });
});

$(document).ready(function(){
$(".flip2").mouseover(function(){
  $(".pane2").slideToggle("100");
  });
});

$(document).ready(function(){
$(".flip3").mouseover(function(){
  $(".pane3").slideToggle("100");
  });
});

</script>
<style type="text/css">  
div.panel,p.flip1,p.flip2,p.flip3,div.pane2,div.pane3
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel,div.pane2,div.pane3
{
height:90px;
display:none;
}
</style>
</head>
 
<body>
 <table border="1">
<tr>
<td>
<p class="flip1">语文</p>
<p class="flip2">数学</p>
<p class="flip3">英语</p>
</td>


<td width="500">
<div class="panel">
<p>我是语文</p>
</div>


<div class="pane2">
<p>我是数学</p>

</div>

<div class="pane3">
<p>我是英语</p>

</div>
</td>
</td>

</table>
</body>
</html>




------解决方案--------------------
JScript code
$(document).ready(function(){    $(".flip1").mouseover(function(){        $(".panel").slideToggle("100");        $(".pane2").css("display", "none");        $(".pane3").css("display", "none");  });});
------解决方案--------------------
HTML code
<html><head><script type="text/javascript" src="E:\jsp\jquery.js"></script><script type="text/javascript">   $(document).ready(function(){$("#menu").find("p").mouseover(function(){    var a=$(this).prevAll().size()+1;    $(".pane"+a).css({display:"block"});    $(".pane"+a).siblings().each(function(){    if($(this).css("display")!="none"){        $(this).css({display:"none"});        }    })    })});</script><style type="text/css">   div.pane1,p.flip1,p.flip2,p.flip3,div.pane2,div.pane3{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}div.pane1,div.pane2,div.pane3{height:90px;display:none;}</style></head> <body> <table border="1"><tr><td id="menu"><p class="flip1">语文</p><p class="flip2">数学</p><p class="flip3">英语</p></td><td width="500"><div class="pane1"><p>我是语文</p></div><div class="pane2"><p>我是数学</p></div><div class="pane3"><p>我是英语</p></div></td></td></table></body></html>
------解决方案--------------------
  相关解决方案