web-dev-qa-db-ja.com

画面を「ジャンプ」させるJQuery UIタブ

jQuery UIタブ の最新バージョンを使用しています。ページの下部に向かってタブが配置されています。

タブをクリックするたびに、画面が上にジャンプします。

これを防ぐにはどうすればよいですか？

この例をご覧ください：

http://5bosses.com/examples/tabs/sample_tabs.html

javascriptjqueryjquery-uitabsjquery-ui-tabs
48
Edward

タブの遷移をアニメーション化する場合（つまり、.tabs({ fx: { opacity: 'toggle' } });）、次のようになります。

ほとんどの場合、ジャンプは「＃」リンクをたどるブラウザーが原因ではありません。ページがジャンプするのは、2つのタブペイン間のアニメーションの中間点で、両方のタブペインが完全に透明で非表示であるため（表示：なし）、タブ付きセクション全体の有効な高さが瞬間的にゼロになるためです。

また、高さゼロのタブセクションによりページが短くなると、実際には（一時的に）短いコンテンツに合わせてサイズ変更されるだけで、ページはジャンプして表示されます。理にかなっていますか？

これを修正する最善の方法は、タブ付きセクションの高さを固定することです。これが望ましくない場合（タブコンテンツの高さが異なるため）、代わりにこれを使用します。

jQuery('#tabs').tabs({
    fx: { opacity: 'toggle' },
    select: function(event, ui) {
        jQuery(this).css('height', jQuery(this).height());
        jQuery(this).css('overflow', 'hidden');
    },
    show: function(event, ui) {
        jQuery(this).css('height', 'auto');
        jQuery(this).css('overflow', 'visible');
    }
});

タブ遷移の前に、計算されたペインの高さを設定します。新しいタブが表示されると、高さは「自動」に戻ります。オーバーフローは「非表示」に設定され、短いタブから背の高いタブに移動するときにコンテンツがペインからはみ出さないようにします。

これは私のために働いたものです。お役に立てれば。

73
Mike Petrovich

これらの線に沿って何かがある場合：

<a href="#" onclick="activateTab('tab1');">Tab 1</a>

タブ有効化コマンドの後に_return false;_を追加してみてください：

<a href="#" onclick="activateTab('tab1'); return false;">Tab 1</a>
15
changelog

私の推測では、タブ遷移をアニメーション化しているのでしょうか？私は同じ問題を抱えており、クリックするたびにページスクロールが先頭に戻ります。

私はjqueryソースでこれを見つけました：

 // Show a tab, animation prevents browser scrolling to fragment,

案の定、これがあれば：

$('.tab_container > ul').tabs();    
$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });

私のコードはトップにジャンプして迷惑です（ただし、アニメーションがあります）。これをこれに変更すると：

$('.tab_container > ul').tabs();    
//$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });

タブアニメーションはありませんが、タブ間の切り替えはスムーズです。

スクロールバックする方法を見つけましたが、適切な修正方法ではありません。ブラウザはタブをクリックした後でもトップにジャンプします。イベントのtabsselectとtabsshowの間でスクロールが発生するため、次のコードはタブに戻ります。

var scroll_to_x = 0;
var scroll_to_y = 0;
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
    scroll_to_x = window.pageXOffset;
    scroll_to_y = window.pageYOffset;
});
$('.ui-tabs-nav').bind('tabsshow', function(event, ui) {
    window.scroll(scroll_to_x, scroll_to_y);
});

今後の進捗状況を投稿します。

5
Brian Ramsay

私はこれに対する解決策を与えられました...

タブがクリックされたときに画面がジャンプしないようにする方法：

タブを含むdivを、固定された高さのdivにラップします。

ここの例を参照してください： http://5bosses.com/examples/tabs/sample_tabs.html

5
edt

マイクのソリューションは原理を大いに実証しましたが、大きな欠点があります-結果のページが短い場合、画面はとにかくトップにジャンプします！唯一の解決策は、scrollTopを記憶し、それを復元するタブを切り替えた後です。しかし、復元の前に、ページ（htmlタグ）を拡大適切に：

（編集-新しいJquery UI API用に変更+大きなページ用の小さな改善）

$(...).tabs({
    beforeActivate: function(event, ui) {
        $(this).data('scrollTop', $(window).scrollTop()); // save scrolltop
    },
    activate: function(event, ui) {
        if (!$(this).data('scrollTop')) { // there was no scrolltop before
            jQuery('html').css('height', 'auto'); // reset back to auto...
                    // this may not work on page where originally
                    // the html tag was of a fixed height...
            return;
        }
        //console.log('activate: scrolltop pred = ' + $(this).data('scrollTop') + ', nyni = ' + $(window).scrollTop());
        if ($(window).scrollTop() == $(this).data('scrollTop')) // the scrolltop was not moved
            return;                // nothing to be done
        // scrolltop moved - we need to fix it
        var min_height = $(this).data('scrollTop') + $(window).height();
            // minimum height the document must have to have that scrollTop
        if ($('html').outerHeight() < min_height) { // just a test to be sure
                            // but this test should be always true
            /* be sure to use $('html').height() instead of $(document).height()
               because the document height is always >= window height!
               Not what you want. And to handle potential html padding, be sure
               to use outerHeight instead!
                   Now enlarge the html tag (unfortunatelly cannot set
               $(document).height()) - we want to set min_height
               as html's outerHeight:
             */
            $('html').height(min_height -
                 ($('html').outerHeight() - $('html').height()));
        }
        $(window).scrollTop($(this).data('scrollTop')); // finally, set it back
    }
});

fxエフェクトでも動作します。

4
TMS

Jquery uiのメニューにも同じ問題がありました-アンカーのクリックイベントのpreventDefault（）により、ページがトップに戻るのを停止します：

 $("ul.ui-menu li a").click(function(e) {
      e.preventDefault();
 });
4
Zach Johnson

event.preventDefault();を使用してみてください。タブを切り替えるクリックイベント。私の機能は次のようになります。

    $(function() {
        var $tabs = $('#measureTabs').tabs();
        $(".btn-contiue").click(function (event) {
            event.preventDefault();
            $( "#measureTabs" ).tabs( "option", "active", $("#measureTabs").tabs   ('option', 'active')+1  );
        });
    });
3
Alexander Georgiev

ご協力いただきありがとうございます。良い提案ですが、私は以前運が悪かったです。 JQuery UIが私の努力を無効にしていると思います。

タブごとのコードは次のとおりです。

<li class=""><a href="#fragment-2"><span>Two</span></a></li>

私はすでにこれを試しましたが成功しませんでした：

<li class=""><a href="#fragment-2" onclick="return false;"><span>Two</span></a></li>

以下に簡単な例を示します（falseを返さない）： http://5bosses.com/examples/tabs/sample_tabs.html

他の提案はありますか？

2
Edward

Cssを使用して、タブ自体の領域ではなく、各タブコンテンツ領域に最小高さを追加してみてください。それは私のためにそれを修正しました。 :)

2
BlogSiteDev

リンクにhref = "＃"を含めて、ユーザーをどこにも連れて行かないようにしますが、onclick = "return false;"を追加する限り、これを行うことができます。キーは、ユーザーを「＃」に送信しないことだと思いますが、ブラウザによっては、デフォルトで現在のページの上部に表示されるようです。

1
Brian
> var scroll_to_x = 0; var scroll_to_y =
> 0;
> $('.ui-tabs-nav').bind('tabsselect',
> function(event, ui) {
>     scroll_to_x = window.pageXOffset;
>     scroll_to_y = window.pageYOffset; }); $('.ui-tabs-nav').bind('tabsshow',
> function(event, ui) {
>     window.scroll(scroll_to_x, scroll_to_y); });

ご協力いただきありがとうございます！他に何が見つかるか教えてください。

上記の機能は動作します（画面は永久に移動しません）...

以下は、タブをクリックすると画面が上にジャンプする方法を示す簡単な例です（上記のコードなし）： http://5bosses.com/examples/tabs/sample_tabs.html

アニメーションは使用されていないことに注意してください。

1
edt

このページ のコメントから発見したはるかに簡単な方法があります。これは、単にhref = "＃"を削除することで、これ以上トップにジャンプしません！私は検証し、それは私のために動作します。乾杯

1
Sameer

href = "＃"をhref = "javascript：void（0）;"に置き換えます「a」要素

100％働きます

0
mike

私の場合、タブ_href=#example1_がページをidの位置にジャンプさせていることがわかりました。タブに固定高さを追加しても違いはありませんでしたので、追加しました：

$('.nav-tabs li a').click( function(e) { e.preventDefault(); });

0
Bill Searle

私は同じ問題を抱えていましたが、私のものは自分で回転していたので、ページの一番下にいると、ブラウザウィンドウが上までスクロールします。タブコンテナの高さを固定しておくとうまくいきました。奇妙なことは、ウィンドウやタブを離れて戻ってもスクロールすることです。しかし、世界の終わりではありません。

0
Eric Lightbody

このような問題がありました。私のコードは：

$("#tabs").tabs({
  hide: {
    effect: "fade",
    duration: "500"
  },
  show: {
    effect: "fade",
    duration: "500"
  }
});

私は単にshowを削除しましたが、それは魅力のように機能しました！

 $("#tabs").tabs({
      hide: {
        effect: "fade",
        duration: "500"
      }
 });
0
Zeihlis