Question

我写了这个快速的jquery选项卡代码，它也更新了哈希位置（附加'_tab'阻止浏览器跳转onload）。

我的问题是如何使不同高度标签之间的过渡更好，而不会将它们叠加在绝对位置上，因为我希望所有标签在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

// 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

为什么不用javascript将类应用于tabs div。设置你的位置绝对样式依赖于那个类？

Jquery选项卡在高标签和短标签之间转换

1 个答案: