jQuery不需要向上滾動

Question

我有一堆描述塊，當點擊相應的圖像時，它們應該淡入，淡出前一個。 淡入淡出正在工作，但頁面在每次單擊時都會向上滾動，弄亂用戶的導航。

google.load("jquery", "1.3");
google.setOnLoadCallback(function() {
jQuery(function($) {

   $('#a').click(function(e){    
        $('#bio-b,#bio-c').fadeOut('slow', function(){
            $('#bio-a').fadeIn('slow');
        });
    });
});
});

我是一個JavaScript / jQuery noob，大多數是從網上找到的代碼拼湊而成的。 我希望代碼不是全部倒退。

編輯：這是在這種情況下將被點擊的圖像的HTML：

<a href="#" id="a"><img></a>

描述：

<article id="bio-a" class="bio"></article>

和CSS（加載頁面時不顯示說明）

#bio-a {
    display : none;
}

是什么導致這個問題的想法，如何解決？

Answer 1

使用href有效地意味着尋找id為nothing的元素。 顯然你沒有那個。 要修復“跟隨”的鏈接，您需要對傳遞給句柄的事件調用preventDefault 。

即：

$('#a').click(function(e){    
    $('#bio-b,#bio-c').fadeOut('slow', function(){
        $('#bio-a').fadeIn('slow');
    });
    e.preventDefault();
});

Answer 2

嘗試從鏈接中刪除href="#"屬性，這可能會觸發頁面滾動。 此行為本身並未在HTML標准中定義 ， <a href="#">基本上只指向相對源，並且由瀏覽器供應商實現行為（某些瀏覽器甚至可能會重新加載頁面）。 大多數開發人員傾向於使用這些元素，因為他們要么懶得設置cursor: pointer元素上的cursor: pointer還是有一些遺留的onclick處理程序......

並幫自己一個忙，並使用最新版本的jQuery（1.10或2.0，但不要忘記在升級之前閱讀jQuery 2.0的免責聲明 ）。 ;-)

Answer 3

我相信這就是你要找的東西。 如果我不正確地理解你，請告訴我，我會調整我的答案：

$(document).ready(function(){

 $('.image').click(function(){    
   var findIdNumber = $(this).attr("id");
   $('#bio-' + findIdNumber).fadeIn();
   $("article").not('#bio-'+findIdNumber).fadeOut();     
  });
});

的jsfiddle