3

我有一个指向 jQuery UI 选项卡的链接，它需要显示选项卡，然后将其滚动到视图中。我的第一直觉是使用 basic$('selector').tabs('option','active',1)来展示它，然后绑定一个回调到 tabsactivate 事件，以动画 body 元素的 scrollTop 到 tabs 容器的偏移量。应该很简单吧？但是当我单击链接时，除非选项卡已处于活动状态，否则页面不会滚动。

经过一番摸索，我发现了问题：选项卡上有一个 150 毫秒的淡入动画，并且 tabsactivate 在动画完成之前触发。因此，当我尝试获取它的偏移量时，它为 0，因为该选项卡实际上尚未显示。我很确定这是原因，因为如果我删除显示/隐藏动画，它会按预期工作。

所以简而言之，我的问题是，是否可以将回调绑定到内置选项卡“显示”动画，以便在动画完成之前不会触发？

如果没有，什么是好的解决方法？

编辑：问题可能不是我想的那样......在下面发布代码。

代码（非常混乱，不是很优化）

<script>
$(function() {

$('.select-tab').click(function(e){
    var $target = $('#'+this.href.split("#")[1]),
        tabindex = $target.index('.ui-tabs-panel'),
        $tabParent = $target.parents('.ui-tabs-container');
    $tabParent.tabs('option','active',tabindex);
    e.preventDefault();
});

$(".scroll").each(function(){
    var $this = $(this),
        $target = $('#'+this.href.split("#")[1]),
        $tabParent = $target.parents('.ui-tabs-container'),
        clickHandler;

    function clickHandler(){
        $('html,body').animate({"scrollTop":$target.offset().top},500,'easeOutCubic');
    }

    if( $this.hasClass('select-tab') && $target.hasClass('ui-tabs-panel') ){
        $this.click(function(e){
            if( $target.index('.ui-tabs-panel') == $tabParent.tabs('option','active') ){
                clickHandler();
            } else{
                $(document).one('tabsactivate',$tabParent,function(e,ui){
                    clickHandler();
                });
            }
        });
    } else{
        $this.click(clickHandler);
    }
});

});
</script>

<a class="select-tab scroll" href="#ProductReviews">
    Read all 36 Reviews
</a>

<div class="ui-tabs-container ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul id="product_tabs" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active">
        <a href="#RelatedProducts">Related Products</a>
    </li>
    <li class="ui-state-default ui-corner-top">
        <a href="#ProductReviews">Product Reviews</a>
    </li>
    <li class="ui-state-default ui-corner-top">
        <a href="#OrderWithConfidence">Order With Confidence</a>
    </li> 
</ul>
<div id="RelatedProducts" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
    <!-- Stuff Here -->
</div>
<div id="ProductReviews" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-helper-hidden">
    <!-- Stuff Here -->
</div>
<div id="OrderWithConfidence" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-helper-hidden">
    <!-- Stuff Here -->
</div>

4

1 回答 1

0

jQuery UI Tabs 有一个触发的方法叫做activate，它在动画完成后触发。

http://api.jqueryui.com/tabs/#event-activate

小提琴：http: //jsfiddle.net/QT5Tm/

于 2013-11-14T20:58:40.740 回答