Javeryタブが背の高いタブと短いタブとの間で移動する

Question

このクイックjqueryタブコードは、ハッシュの場所（「_tab」でブラウザの読み込み負荷を防ぐ）を更新します。

私は、高さの異なるタブ間の遷移をポジションアブソリュートで重ねるのではなく、JSをオフにしてすべてのタブを表示するようにしたいと思っています。

HTML

<ul class="tabNavigation"> 
    <li class="tab1"><a href="#tab1">Tab 1</a></li> 
    <li class="tab2"><a href="#tab2">Tab 2</a></li> 
</ul> 

<div class="tabs"> 
    <div id="tab1" style="height: 400px"> 
     tab1 
    </div> 

    <div id="tab2" style="height: 4000px"> 
     tab2 
    </div>       
</div> 

JSあなただけのJavaScriptでタブのdivにクラスを適用しない理由

// Tabs with hash change 
    var tabContainers = $('div.tabs > div'); 
    var hash = window.location.hash.replace("_tab",""); 

// On page load check for hash else show :first 
if($(hash).length != 0) { 
    tabContainers.hide(); 
    $(hash).show(); 
    $('ul.tabNavigation li.'+hash.replace(/#/,'')+' a').addClass('selected'); 
} else { 
    tabContainers.hide().filter('div:first').show(); 
    $('ul.tabNavigation li:eq(0) a').addClass('selected'); 
} 

$('ul.tabNavigation a').click(function(e) { 
    tabContainers.slideUp("slow"); 
    tabContainers.filter(this.hash).slideDown("fast"); 

    $('ul.tabNavigation a').removeClass('selected'); 
    $(this).addClass('selected'); 

    // Prefix with _tab to prevent browser jump on page load. 
    window.location.hash = this.hash+'_tab'; 

    e.preventDefault(); 
}); 

Answer 1

。そのクラスに依存するあなたの位置の絶対的なスタイルを設定しますか？