タブの上にカーソルを置くと、ブラウザはページの上部にスクロールします。

Question

私のコードに問題があります。

は、私は、これは

$(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; 
    }); 
}); 

私はタブの上にカーソルを置く

は、内容が変更されたJS使用していますが、ブラウザがトップにページをスクロールします。 私が持っていると思います。 - タブの上にカーソルを置くと、ページは現在のスクロール位置に残り、コンテンツが更新されます。

Answer 1

問題が起こっているあなたがhide()を実行する際ため、ページの高さがされますブラウザーはページの上部にスクロールしなくなりました（つまり、ページ全体を表示するためにスクロールする必要はありません）。コンテナdivに<div class="tab_container">の高さを付けます。

放火犯を使用して、サイトでテストしてスクロールを防ぐ - 例えば500pxに<div class="tab_container">の高さを設定する - これは、問題を修正...は、コンテンツ高さが可変ですか？

min-height CSSプロパティを使用することもできます。

Answer 2

あなたはホバー機能でイベントパラメータを追加し、その後でpreventDefaultを持つブラウザから扱うデフォルトのイベントをキャンセルする必要があります。

//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(); 
    }); 
});