关于隐藏显示层的问题！

我现在有 4个div   class名称一样 我想用js 实现 鼠标放到哪个上面 其他的隐藏，现在我就是不明白 在class一样的情况下怎么实现，不用ID 不用name  因为我需要在一个 页面放 放许多这样的 4个div！谁来指点一下  

解决方案 »

  1.   

    你是否知道有个this这个东西？？？？？？？好吧  我给你写个JQUERY
    $(".className").mouseover(function(
        $(".className").hide();
        $(this).show();
    ));你的明白？？？？？
      

  2.   

    用jquery 实现很简单，不过不知道你的div怎么布局的，因为你隐藏了其他div，只显示一个， 布局会发生改变。下面的例子我使用了position进行定位，所以布局不会变化
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css">
    #divList{position:relative;}
    .divClass{ width:300px; height:100px; background:orange; float:left; margin:0 10px; position:absolute}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
    //使用position定位div，避免发生布局变化
    $("#divList div.divClass").each(function(){
    var i = $(this).index();
    $(this).css({"left":i*310});
    })

    //div隐藏显示
    $("#divList div.divClass").hover(function(){
    $(this).siblings().fadeOut(); //鼠标经过
    },function(){
    $("#divList  div.divClass").fadeIn(); //鼠标离开
    })
    })
    </script>
    </head>
    <body>
    <div id="divList">
        <div class="divClass">1 </div>
        <div class="divClass">2 </div>
        <div class="divClass">3 </div>
        <div class="divClass">4 </div>
    </div>
    </body>
    </html>
      

  3.   

    俩高手，谢谢 我给this 忘了！
      

  4.   


    <style type="text/css"> 
      .div1
       {
     margin:10px;
         width:50px;
         border:1px solid red ;
       }
    </style><script type="text/javascript">
    $(document).ready(function(){
      
      $(".div1").bind("mouseover",
      function()
      {
        $(this).siblings("div").each(function()
    {
      $(this).toggle();//切换可视状态
    }
    );
      }
      );});
    </script><title>无标题文档</title>
    </head><body style="overflow:hidden;"><h4>div显示/隐藏</h4> <div  class="div1">div1</div>
     <div  class="div1">div2</div>
     <div  class="div1">div3</div>
     <div  class="div1">div4</div>