Question

我有一些代码可以在单击时成功更改某些选项卡。我遇到的问题是选项卡更改时，如果选项卡中的内容高度不同，则更改时其下的内容会上下跳跃。

我想知道是否有一种方法可以调整当前设置以添加某种过渡，以便当单击时上方的内容发生更改时，下方的内容可以上下滑动？

任何帮助将不胜感激。预先感谢！

$(".tab-content .group").hide(); // Initially hide all content
$(".tabs li:first").attr("id","current"); // Activate first tab
$(".tab-content .group:first").fadeIn(); // Show first tab content
$('.tabs li a').click(function(e) {
   e.preventDefault();
   if ($(this).attr("id") == "current"){ //detection for current tab
     return       
   } else{             
     $(".tab-content .group").hide(); //Hide all content
     $(".tabs li").attr("id",""); //Reset id's
     $(this).parent().attr("id","current"); // Activate this
     $($(this).attr('href')).fadeIn(); // Show content for current tab
   }
});

Answer 1

我相信this question has already been answered。这个想法是，您查看当前的高度是什么，如果将其设置为自动，则将看到该高度，然后为差异设置动画。看到这里：http://jsfiddle.net/zbB3Q/

$('button').on('click', function(){
    setContainerHeight();
});


function setContainerHeight() {
    var heightnow=$(".pagecontainer").height();
    var heightfull=$(".pagecontainer").css({height:'auto'}).height();

    $(".pagecontainer").css({height:heightnow}).animate({
        height: heightfull
    }, 500);
}

如何使更改的标签JS适应标签更改时的过渡高度？

1 个答案: