Question

我使用以下代码来跟踪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);
     });
 });

我做错了什么？

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

请注意，goto不是有效属性，如果您使用的是HTML5，请考虑使用data-*属性。

Jquery只适用于断点

1 个答案: