jquery有关问题。有图

2012-01-19

jquery问题。有图如图，我鼠标经过三个文本后，后面三个都显示了。我想只让他显示一个。就是当鼠标点击新浪时，

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>
[解决办法] 
 
不知道你是要点击，还是鼠标放上去就改变。
这样的效果是不是你想要的：
$(function(){
$(".left").mouseover(function(){
var left=$(this).html();
var right=$(".right");
right.fadeOut("normal",function(){
$(".right").html(left);
right.fadeIn();
});
});
});

<table border="1" width="20%" height="50px;">
<tr>
<td rowspan="3" align="right">
<p class="left">
语文</p><br />
<p class="left">
数学</p><br />
<p class="left">
英语</p>
</td>
<td>
<p class="right">语文</p>
</td>
</table>

热点排行

Java Web开发

jquery有关问题。有图