jquery有关问题。有图-Java教程-爱易网页

jquery有关问题。有图

日期：2014-05-17　浏览次数：21190 次

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>

------解决方案--------------------

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

jquery有关问题。有图

相关资料更多>

推荐阅读更多>