jQuery нежелательный прокрутка вверх

Question

У меня есть куча блоков описания, которые должны затухать при щелчке соответствующего изображения, затухания предыдущего. Fading работает, но страница продолжает прокручиваться на каждом клике, возиться с навигацией пользователя.

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="#" из ссылки, что может привести к срабатыванию прокрутки страниц. Такое поведение is not defined как таковое в стандарте HTML, <a href="#"> в основном просто указывает на относительный источник, и именно разработчику браузера реализовать это поведение (некоторые браузеры могут даже перезагрузить страницу). Большинство разработчиков, как правило, использовать эти элементы, потому что их либо ленив, чтобы установить cursor: pointer на элементе или иметь некоторые устаревшие onclick обработчиков ...

И сделайте себе одолжение и использовать последнюю возможную версию JQuery (1.10 или 2.0, но дон» Забудьте прочесть disclaimer for jQuery 2.0 перед обновлением). ;-)

Answer 2

Я считаю, что это то, что вы ищете. Если я неправильно понял вас, пожалуйста, дайте мне знать, и я буду корректировать свой ответ:

$(document).ready(function(){ 

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

JSFIDDLE

Answer 3

спользование href из # фактически означает искать элемент с идентификатором ничего. Очевидно, у вас этого нет. Чтобы исправить ссылку «следовать», вам нужно позвонить preventDefault о событии, которое будет передано вашему дескриптору.

т.е .:

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