Jquery製表符在高和短製表符之間轉換

我寫了這個快速jquery製表符代碼，它也更新了散列位置（附加'_tab'防止瀏覽器跳轉onload）。Jquery製表符在高和短製表符之間轉換

我的問題是如何使不同高度標籤之間的轉換更好，而不必將它們疊放在絕對位置的頂部，因爲我希望所有標籤在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>

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

來源

2011-07-09 John Magnolia

爲什麼你不只是應用一個類到JavaScript的標籤div。在這個類中設置你的位置絕對樣式依賴於？ – lnrbob

明智的想法，我只是在想它會變得非常複雜。謝謝 –

非常好，將它設置爲下面的答案:) – lnrbob

你爲什麼不只是應用類使用JavaScript的選項卡股利。在這個類中設置你的位置絕對樣式依賴於？

來源

2011-07-09 09:59:16 lnrbob

Jquery製表符在高和短製表符之間轉換

回答

相關問題