2

我正在使用以下代码来跟踪 jquery-ui-tabs 中的命名锚点。我有它，所以当点击链接时，它应该带我到相应的选项卡并滚动到 id。链接工作（经过很多麻烦），但是只有当我在动画行上放置一个断点时，滚动才有效。 

jQuery(document).ready(function($) {
    $('a[goto]').click(function(evt) {
        evt.preventDefault();
        var whereTo = $(this).attr('goto');
        $tabs = $("ul.ui-tabs-nav li");
        $tabs.find('a[href=#' + whereTo + ']').trigger('click')
        $('html,body').animate({
            scrollTop:$(this.hash).offset().top},
            500);
        });
    }); 
});

我尝试将其作为回调的一部分，但仍然没有运气。

 $('a[goto]').click(function(evt) {
     evt.preventDefault();
     var whereTo = $(this).attr('goto');
     $tabs = $("ul.ui-tabs-nav li");
     $tabs.find('a[href=#' + whereTo + ']').trigger('click', function(){
         $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
     });
 });

我究竟做错了什么？

4

1 回答 1

1

trigger方法不接受回调函数，它触发事件以便执行事件处理程序，你有使用goto属性的值，你试图做的最终给你这个变量的值，实际上那部分是多余的。只需使用whereTo变量。

jQuery(document).ready(function ($) {
  var $tabs = $("ul.ui-tabs-nav li");
  $('a[goto]').click(function (evt) {
    evt.preventDefault();
    var whereTo = $(this).attr('goto');
    var hash = this.hash;
    // 1
    $tabs.find('a[href=#' + whereTo + ']').trigger('click');
    setTimeout(function(){
       $('html,body').animate({
          scrollTop: $(hash).offset().top
       }, 500);
    }, 500)
    // 2
    // $tabs.find('a[href=#' + whereTo + ']').trigger('click')
    // $('#'+ whereTo).closest('.ui-tabs-panel').promise().done(function(){
    //     $('html,body').animate({
    //        scrollTop: $('#' + whereTo).offset().top
    //     }, 500);
    // })
  });
});

Note that goto is not valid attribute, if you are using HTML5 consider using data-* attributes.

于 2013-01-06T21:55:50.110 回答