读书人

请问关于jquery关于UL获取LI的有关问题

发布时间: 2013-01-11 11:57:35 作者: rapoo

请教关于jquery关于UL获取LI的问题。
HTML是这样的


<div id="div1">
<ul class="slice-piece">
<li>a0 (-9)</li>
<li>a1 (-8)</li>
<li>a2 (-7)</li>
<li>a3 (-6)</li>
<li>a4 (-5)</li>
<li>a5 (-4)</li>
<li>a6 (-3)</li>
<li>a7 (-2)</li>
<li>a8 (-1)</li>
</ul>
<ul class="slice-piece">
<li>b0 (-9)</li>
<li>b1 (-8)</li>
<li>b2 (-7)</li>
<li>b3 (-6)</li>
<li>b4 (-5)</li>
<li>b5 (-4)</li>
<li>b6 (-3)</li>
<li>b7 (-2)</li>
<li>b8 (-1)</li>
</ul>
</div>


我希望当鼠标移动到第二个UL中的第三个LI标签的时候,能够隐藏第二个UL其他所有LI标签,只显示鼠标所在的第三个LI标签。
不知道JQUERY应当用什么办法实现呢?麻烦各位大侠了! jquery
[解决办法]

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript">
$(function(){
$(".slice-piece1 li:nth-child(3)").mouseover(function(){ $(".slice-piece1 li").not($(this)).hide();});
//$(".slice-piece1 li:nth-child(3)").mouseout(function(){ $(".slice-piece1 li").not($(this)).show();});//这句是鼠标移开元素恢复,要不要你自己看着办吧
})
</script>
<div id="div1">
<ul class="slice-piece">
<li>a0 (-9)</li>
<li>a1 (-8)</li>
<li>a2 (-7)</li>
<li>a3 (-6)</li>
<li>a4 (-5)</li>
<li>a5 (-4)</li>
<li>a6 (-3)</li>
<li>a7 (-2)</li>
<li>a8 (-1)</li>
</ul>
<ul class="slice-piece1">
<li>b0 (-9)</li>
<li>b1 (-8)</li>
<li>b2 (-7)</li>
<li>b3 (-6)</li>
<li>b4 (-5)</li>
<li>b5 (-4)</li>
<li>b6 (-3)</li>
<li>b7 (-2)</li>
<li>b8 (-1)</li>
</ul>
</div>

[解决办法]
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript">
$(function(){
$(".slice-piece1 li:eq(2)").hover(function(){
$(".slice-piece1 li").not($(this)).animate({opacity:0},1000);
},function(){


$(".slice-piece1 li").animate({opacity:1},1000);
});
})
//我想直接透明比较好,保持位置不变,如果隐藏就会抖动!
</script>
<div id="div1">
<ul class="slice-piece">
<li>a0 (-9)</li>
<li>a1 (-8)</li>
<li>a2 (-7)</li>
<li>a3 (-6)</li>
<li>a4 (-5)</li>
<li>a5 (-4)</li>
<li>a6 (-3)</li>
<li>a7 (-2)</li>
<li>a8 (-1)</li>
</ul>
<ul class="slice-piece1">
<li>b0 (-9)</li>
<li>b1 (-8)</li>
<li>b2 (-7)</li>
<li>b3 (-6)</li>
<li>b4 (-5)</li>
<li>b5 (-4)</li>
<li>b6 (-3)</li>
<li>b7 (-2)</li>
<li>b8 (-1)</li>
</ul>
</div>


[解决办法]

<script type="text/javascript">
$(".slice-piece:last li").eq(2).mouseenter(function () {
$(".slice-piece:last li").not($(this)).hide("slow");
})
</script>

[解决办法]
大哥,你这是害我们呀,明明上面你说是第二个ul!!!!!!!
<script type="text/JavaScript">
$(function(){
$("li").hover(function(){
$(this).siblings().stop().animate({opacity:0},1000);
},function(){
$(this).siblings().stop().animate({opacity:1},1000);
});
})
</script>

读书人网 >JavaScript

热点推荐