jQuery fade делает переход на страницу

Question

jQuery fade делает переход на страницу

По какой-то причине fadeIn из jQuery заставляет мою страницу прыгать наверх. Каждый отдельный div, в котором он исчезает, делает полосу прокрутки разного размера, поэтому я думаю, что это может быть причиной того, почему «return false» не работает. Вот код:

    jQuery(document).ready(function($) {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn('slow', function() {
  $(this).show(); });
return false
});
});

Буду признателен, если кто-нибудь сможет помочь. Вот сайт:

www.matthewruddy. com / demo

Это ссылки с вкладками над основным контентом. Каждый из них попадает в пятерку лучших из этой категории.

Заранее спасибо. Мэтью.

9

jquery fadein

задан Matthew Ruddy 26 August 2010 в 11:09

3 ответа

score 12 · Answer 1

Проблема не в ссылках, хотя я так понимаю первая мысль, дело в самом переходе.

В течение доли секунды (один кадр, 13 мс, если быть точным, между скрытым и первым кадром постепенного появления) в области панелей вкладок нет контента, поэтому страница прокручивается. вверх, потому что документ был короче.

Чтобы избежать этого, вам нужно предотвратить уменьшение размера документа, к счастью для вашей конкретной страницы, это довольно просто. Просто измените это:

<div class="tab_container">

На это:

<div class="tab_container" style="height: 516px;">

Или дайте ему внешний CSS:

.tabs_container { height: 516px; }

Это предотвратит изменение размера страницы .tab_content div для этого одного кадра.

score 1 · Answer 2

Вместо возврата false выполните e.preventDefault() (почему можно узнать здесь: http://css-tricks.com/return-false-and-prevent-default/):

$("ul.tabs li").click(function(e) {
    e.preventDefault()
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn('slow', function() {
    $(this).show(); });

});

Но проблема не в возврате false, потому что ссылка не пройдена. Проблема в том, что вы скрываете текущее содержимое вкладки, а затем исчезаете на новом. Это приводит к изменению высоты вашего тела, поэтому полоса прокрутки становится короче, потому что старый контент скрыт, заставляя вас всплывать наверх. Вы можете попытаться получить текущую высоту div, высоту содержимого, которое будет загружено, и динамически изменить высоту div.

Answer 3

Еще один полезный совет, особенно когда для ссылки используется