奇怪頁轉到點擊一個jQuery標籤

Question

時，我有使用製表符一些jQuery代碼此頁面上的底部： http://isintl.com/certifications/tbc1/

然而，當標籤是在頁面的頂部，並點擊頁面跳轉下來！

我試圖實施防止默認設置，但沒有任何作品！

請幫忙！

<script type="text/javascript"> 
// tabbed content 
    // http://www.entheosweb.com/tutorials/css/tabs.asp 
    $(".tab_content").hide(); 
    $(".tab_content:first").show(); 

    /* if in tab mode */ 
    $("ul.tabs li").click(function() { 

     $(".tab_content").hide(); 
     var activeTab = $(this).attr("rel"); 
     $("#"+activeTab).fadeIn();   

     $("ul.tabs li").removeClass("active"); 
     $(this).addClass("active"); 

     $(".tab_drawer_heading").removeClass("d_active"); 
     $(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active"); 


    }); 
    /* if in drawer mode */ 
    $(".tab_drawer_heading").click(function() { 

     $(".tab_content").hide(); 
     var d_activeTab = $(this).attr("rel"); 
     $("#"+d_activeTab).fadeIn(); 

     $(".tab_drawer_heading").removeClass("d_active"); 
     $(this).addClass("d_active"); 

     $("ul.tabs li").removeClass("active"); 
     $("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active"); 
    }); 


    /* Extra class "tab_last" 
     to add border to right side 
     of last tab */ 
    $('ul.tabs li').last().addClass("tab_last"); 



</script> 

Answer 1

這是因爲頁面的大小調整爲選項卡的大小。第一個選中的選項卡比第二個更高。當你點擊這個標籤時，它會佔用更少的空間，使標籤和頁面底部之間的距離減少。然後，頁面底部將對齊窗口的底部。

您可以通過使您的選項卡與CSS保持相同的高度來緩解此問題。這將在一些選項卡下添加空白區域。

Answer 2

傑夫克拉克說的其實是正確的，爲了防止頁面跳躍，你可以給你的tab_container一個最小高度。

.tab_container { 
    min-height: 900px; 
}