При наведении курсора на вкладку браузер переходит к верхней части страницы.

Question

У меня проблема с моим кодом.

Я использую этот JS

$(document).ready(function() {
//Default Action
  $(".tab_content").hide(); //Hide all content
  $("ul.tabs li:first").addClass("active").show(); //Activate first tab
  $(".tab_content:first").show(); //Show first tab contentDocument

//On Hover Event
  $("ul.tabs li").hover(function() {
     $("ul.tabs li").removeClass("active"); //Remove any "active" class
     $(this).addClass("active"); //Add "active" class to selected tab
     $(".tab_content").hide(); //Hide all tab content
     var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
     $(activeTab).fadeIn(); //Fade in the active content
     return true;
  });
});

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

Answer 1

Проблема возникает из-за того, что при выполнении hide() высота страницы уменьшается, заставляя браузер прокручивать страницу вверх (т. Е. Прокрутка не требуется для отображения всей страницы).Задайте свой контейнер div: <div class="tab_container"> высота.

Протестировано на вашем сайте с помощью firebug и предотвращает прокрутку - установите высоту <div class="tab_container"> на 500px, например - это решит проблемувысота переменной содержимого?

Вы также можете использовать свойство min-height css.

Answer 2

Вы должны добавить параметр события в функцию наведения, а затем отменить обработку событий по умолчанию из браузера с помощью protectDefault:

//On Click Event
$("ul.tabs li").hover(function() {
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    $(this).find("a").click(function(e){
        e.preventDefault();
    });
});