关于一个jquery的问题请多多指教

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="css.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
   $(function(){
   //$("ul li:nth-child(1)").mouseout(function(){
//  $(this).parents(".ju").find("#a1").css("display","none");
//   });
      $("ul li:nth-child(2)").mouseover(function(){
   $(this).parents(".ju").find("#a1").css("display","none");
    $(this).parents(".ju").find(".a2").css("display","block");

  });
     $("ul li:nth-child(2)").mouseout(function(){
   $(this).parents(".ju").find(".a2").css("display","none");
       $("ul li:nth-child(3)").mouseover(function(){
   $(this).parents(".ju").find(".a3").css("display","block");
   });
     $("ul li:nth-child(3)").mouseout(function(){
   $(this).parents(".ju").find(".a3").css("display","none");
   });
       $("ul li:nth-child(4)").mouseover(function(){
   $(this).parents(".ju").find(".a4").css("display","block");
   });
     $("ul li:nth-child(4)").mouseout(function(){
   $(this).parents(".ju").find(".a4").css("display","none");
   });   });
</script>
  </head>
  <body>
  <div class="ju">
  <a id="a1"><img src="1.jpg"></a>
  <a class="a2"><img src="2.jpg"></a>
  <a class="a3"><img src="3.jpg"></a>
  <a class="a4"><img src="4.jpg"></a>
  <ul class="ha">
  
  <li></li>
  <li></li>
  <li></li>
  </ul>
  </div>
  </body>
</html>
.body{
margin:0px auto;
padding:0px;
}
.ju{
height:126px;
width:160px;
margin:0px auto;
padding:0px;
overflow:hidden;
border:#000 1px solid;
}
.ju ul{
width:160px;
list-style-type:none;
margin:0px;
padding:0px;
}
.ju ul li{
width:40px;
height:126px;
float:left;
margin:0px;
padding:0px;
}
.ju a{
display:none;
z-index:999;
}
#a1{
display:block;
}
请问一下这个代码有问题吗我是要用Jquery来实现一个效果就是在一个DIV里面鼠标在其不用的位置显示不同的图片，请指教！谢谢我是JQ新手不甚感谢

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
a{display:none;}
</style>
<script type="text/javascript">
   function showA(id){
document.getElementById("a"+id).style.display="block";
   }
   function hideA(id){
   document.getElementById("a"+id).style.display="none";
   }
</script>
  </head>
  <body>
  <div class="ju">
  <a id="a1" class="a1">1</a>
  <a id="a2" class="a2">2</a>
  <a id="a3" class="a3">3</a>
  <a id="a4" class="a4">4</a>
  <ul class="ha">
  <li onmouseover="showA('1');" onmouseout="hideA('1');">速速</li>
  <li onmouseover="showA('2');" onmouseout="hideA('2');">ddd </li>
  <li onmouseover="showA('3');" onmouseout="hideA('3');">顶顶顶</li>
  <li onmouseover="showA('4');" onmouseout="hideA('4');">ddd</li>
  </ul>
  </div>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
a{display:none;}
</style>
<script type="text/javascript">
   function showA(id){
document.getElementById("a"+id).style.display="block";
   }
   function hideA(id){
   document.getElementById("a"+id).style.display="none";
   }
</script>
  </head>
  <body>
  <div class="ju">
  <a id="a1" class="a1">1</a>
  <a id="a2" class="a2">2</a>
  <a id="a3" class="a3">3</a>
  <a id="a4" class="a4">4</a>
  <ul class="ha">
  <li onmouseover="showA('1');" onmouseout="hideA('1');">速速</li>
  <li onmouseover="showA('2');" onmouseout="hideA('2');">ddd </li>
  <li onmouseover="showA('3');" onmouseout="hideA('3');">顶顶顶</li>
  <li onmouseover="showA('4');" onmouseout="hideA('4');">ddd</li>
  </ul>
  </div>
  </body>
</html>
就这样把类似的效果没必要jq了
我JS不会只会JQ 我刚刚试了下为为什么没电反应呢
我JS不会只会JQ 我刚刚试了下为为什么没电反应呢
<!DOCTYPE html>
<html>
<head>
<style>
a{display:none;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$(".ju").on({mouseenter:function(){
$(".ju a").eq($(this).index()).show();
},
mouseleave:function(){
$(".ju a").eq($(this).index()).hide();
}},"ul>li");
});
</script>
</head>
<body>
<div class="ju">
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<ul>
<li>啊啊啊啊啊啊啊啊</li>
<li>对弹道弹道弹道弹</li>
<li>吞吞吐吐吞吞吐吐</li>
<li>零零落落零零落落</li>
</ul>
</div>
</body>
</html>
事件最好放在ul上<!DOCTYPE html>
<html>
<head>
<style>
a{display:none;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$(".ju ul").on({mouseenter:function(){
$(".ju a").eq($(this).index()).show();
},
mouseleave:function(){
$(".ju a").eq($(this).index()).hide();
}},"li");
});
</script>
</head>
<body>
<div class="ju">
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<ul>
<li>啊啊啊啊啊啊啊啊</li>
<li>对弹道弹道弹道弹</li>
<li>吞吞吐吐吞吞吐吐</li>
<li>零零落落零零落落</li>
</ul>
</div>
</body>
</html>

关于一个jquery的问题 请多多指教

解决方案 »

关于一个jquery的问题请多多指教