1

<div>binの 1 つが選択されたときに、なぜトップにジャンプするのか誰かが知っていますか? 私はすべてを試しましたが、うまくいきません（少なくともChromeでは）。

これが私のスクリプトです：

<script>
 $(document).ready(function () {
        $("#bin1").click(function(){ 
           $("#div1").slideDown("1000"); 
           $("#div3").hide(); 
           $("#div2").hide();  
           $("#div4").hide();
        });
       $("#bin2").click(function(){ 
           $("#div2").slideDown("1000"); 
           $("#div3").hide(); 
           $("#div1").hide();  
           $("#div4").hide();
        });
      $("#bin3").click(function(){ 
          $("#div3").slideDown("1000"); 
           $("#div1").hide(); 
           $("#div2").hide();  
           $("#div4").hide();
       });
     $("#bin4").click(function(){ 
          $("#div4").slideDown("slow"); 
          $("#div3").hide(); 
          $("#div2").hide();  
          $("#div1").hide();

          return false;
      });
  });
 </script>

HTMLは次のとおりです。

<div id="binheader" style="padding-top:20px;">
  <a href="javascript: return null;" id="bin1">
    <img src="img/black bin name.png"
    style="width:200px; float:left;" />
  </a>
  <a href="javascript: return null;" id="bin2">
    <img src="img/green bin name.png"
    style="padding-left:33px; width:200px; float:left;" />
  </a>
  <a href="javascript: return null;" id="bin3">
    <img src="img/yellow box name.png"
    style="padding-left: 34px; width:200px; float:left;" />
  </a>
  <a href="javascript: return null;" id="bin4">
    <img src="img/green box name.png"
    style="padding-left:33px; width:200px; float:left;" />
  </a>
</div>
4

1 に答える 1

7 
<a id="bin1" href="#">

次に、クリック ハンドラーで次のようにします。

$('#bin1').click(function() {
    // do stuff
    return false;
});

コードhref="javascript: return null;"がアンカーを無効にできないため、ページが一番上にジャンプします。href属性内に JavaScript コードを入れないでください。

このことを考慮...

HTML:

<ul id="links">
    <li> <a href="#"> <img src="..."> </a> </li>
    <li> <a href="#"> <img src="..."> </a> </li>
    <li> <a href="#"> <img src="..."> </a> </li>
</ul>

<ul id="slides">
    <li> ... </li>
    <li> ... </li>
    <li> ... </li>
</ul>

JavaScript:

$('#links a').click(function() {
   var i = $(this).parent().index();
   $('#slides').children().hide().eq(i).slideDown('slow');
});

24 行のコードを 4 行に短縮したことに注意してください。

于 2011-01-26T19:20:16.837 に答える