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

は有効な属性ではないことに注意してくださいgoto。HTML5 を使用している場合は、data-*属性の使用を検討してください。

于 2013-01-06T21:55:50.110 に答える