jquery跳到頂部點擊事件，返回false或preventDefault不起作用

Question

我寫了一個簡單的jQuery腳本的內容滑塊。我的問題是，滑動內容時，屏幕總是跳轉到父div的頂部位置。我試圖返回假，的preventDefault應付這種效果，但兩人只是使腳本不再起作用，當我點擊的鏈接沒有任何反應..

因此，這裏是jQuery代碼：

$(document).ready(function(){ 

var itemCount = $('.container div').size(); 
var itemWidth = $('.container div').width(); 


$('.container').wrap('<div id="AboutSlider"></div>'); 

$('#AboutSlider').css({'width':'640px', 'overflow':'hidden', 'position':'relative', 'height':'400px'}); 

$('#AboutSlider .container').css({'width':itemCount*itemWidth+'px', 'position':'absolute', 'height':'400px'}); 

$('.container .aboutContent').css({'padding-left':'0px'}); 

$('#AboutSlider .aboutContent').css({'width':'640px', 'float':'left', 'min-height':'400px'}); 


$('#AboutNav a').click(function(){ 

     var integer = $(this).attr('rel'); 

     $('#AboutSlider .container').animate({left:-640*(parseInt(integer)-1)}) 

     $('#AboutNav a').each(function(){ 
     $(this).removeClass('active'); 
      if($(this).hasClass('button'+integer)){ 
       $(this).addClass('active')} 
     }); 

    }); 

}）;

這裏各個HTML位：

<div id="Dienstleistungen"> 
         <div class="left_column"> 
         <h2>Meine Dienstleistungen</h2> 
         <h3>KOMPETENZEN</h3> 
         <ul id="AboutNav"> 
          <li><h1><a href="#Kompetenzen" class="button1 active" rel="1" title="Frontend Entwicklung | Sebastian B&ouml;hme">&Uuml;berblick</a></h1></li> 
          <li><h1><a href="#Frontend" class="button2" rel="2" title="Frontend Entwicklung | Sebastian B&ouml;hme">Frontend Entwicklung</a></h1></li> 
          <li><h1><a href="#CMS" class="button3" rel="3" title="Content Management Systeme &amp; Online Shops | Sebastian B&ouml;hme">Content Management Systeme &amp; Online Shops</a></h1></li> 
          <li><h1><a href="#SEO" class="button4" rel="4" title="Suchmaschinenoptimierung (SEO) | Sebastian B&ouml;hme">Suchmaschinenoptimierung (SEO)</a></h1></li> 
          <li><h1><a href="#ScreenDesign" class="button5" rel="5" title="Screen Design | Sebastian B&ouml;hme">Screen Design</a></h1></li> 
          <li><h1><a href="#Hand" class="button6" rel="6" title="Alles aus einer Hand | Sebastian B&ouml;hme">Alles aus einer Hand</a></h1></li> 
         </ul> 
         </div> 

         <div class="container"> 

         <div id="Kompetenzen" class="aboutContent right_columns"> 
          <h1>&Uuml;berblick</h1> 
          <p>Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna. 
          </p> 
          <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna. 
          </p> 
         </div> 
        <hr /> 
         <div id="Frontend" class="aboutContent right_column "> 
          <h1>Frontend Entwicklung</h1> 
          <p>Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna. 
          </p> 
          <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna. 
          </p> 
         </div> 
        <hr /> 
         <div id="CMS" class="aboutContent right_column "> 
          <h1>Content Management Systeme &amp; Online Shops</h1> 
          <p>Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna. 
          </p> 
          <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna. 
          </p> 
         </div> 
        <hr /> 
         <div id="SEO" class="aboutContent right_column "> 
          <h1>Suchmaschinenoptimierung (SEO)</h1> 
          <p>Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna. 
          </p> 
          <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna. 
          </p> 
         </div> 
        <hr /> 
         <div id="ScreenDesign" class="aboutContent right_column "> 
          <h1>Screen Design</h1> 
          <p>Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna. 
          </p> 
          <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna. 
          </p> 
         </div> 
        <hr /> 
         <div id="Hand" class="aboutContent right_column"> 
          <h1>Alles aus einer Hand</h1> 
          <p>Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna. 
          </p> 
          <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna. 
          </p> 
         </div> 
         </div><!-- AboutSlider --> 
        </div><!-- Dienstleistungen --> 

有人有任何想法？提前感謝！

Answer 1

看起來它工作正常，我與preventDefault：

$('#AboutNav a').click(function(event) { 
    event.preventDefault(); 

    var integer = $(this).attr("rel"); 

    $('#AboutSlider .container').animate({ 
     left: -640 * (parseInt(integer) - 1) 
    }) 

    $('#AboutNav a').each(function() { 
     $(this).removeClass('active'); 
     if ($(this).hasClass('button' + integer)) { 
      $(this).addClass('active') 
     } 
    }); 

}); 

在這裏工作：http://jsfiddle.net/79Rzh/

其他說明：

您可以將這段代碼：

$('#AboutNav a').each(function(){ 
    $(this).removeClass('active'); 
    if($(this).hasClass('button'+integer)) { 
     $(this).addClass('active') 
    } 
}); 

有了這個：

$("#AboutNav a").removeClass("active"); 
$(this).addClass('active'); 

• 還要考慮緩存選擇您反覆使用（var $this = $(this);）。
• 此外，確保並傳遞一個基數參數parseInt()（parseInt(integer, 10)