0

jQuery UI タブを次のように設定しています。

$(function() {
    $('#tabs').tabs({
        ajaxOptions: {
            type:'post',
            async: false,
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab." );
            }
        },
        load: function(event, ui) {
            $(ui.panel).delegate('a', 'click', function(event) {
                $(ui.panel).load(this.href);
                event.preventDefault();
            });
        }
    });     
});

これはタブを正常にロードします：

<div id="tabs">
        <ul>
          <li><a href="div-s.php">Summary</a></li>
          <li><a href="content.php?div=Production">Products</a></li>
          <li><a href="content.php?div=Digital">Recordings</a></li>
          <li><a href="login.php">Login</a></li>
          <li><a href="resources.html">Resources</a></li>
        </ul>
    </div>

私の最初のタブdiv-s.phpにはページネーションが含まれています。ページネーションのリンクが同じタブで開かれることを期待していますが、それらをクリックすると、ブラウザは実際に私をリダイレクトしますdiv-s.php?pagenum=2

どうすればこれを修正できますか?

4

1 に答える 1

3

何が起こっているか: jquery.tab プラグインajaxOptionsは、属性マップで を有効にすると、タブ リンクを「オフ」にします。

したがって、いくつかのタブをクリックすると、コンテンツが AJAX リクエストによって読み込まれ、タブ パネルに挿入されます。イベント リスナーやスクリプトを追加しなければ、タブ コンテンツ内のすべての HTML 要素は通常の要素として機能します。次に、ページネーション リンクを含むコンテンツを読み込み、そのうちの 1 つをクリックすると、タブ パネルがインフレームではないため、すべてのページをリロードする通常のリンクをクリックすることになります。

ソリューション：

属性に設定した関数loadは何もしませんが、少し変更するだけで、タブ パネル内のリンクに ajax ロードを強制することができます :)

$(".ui-tabs-panel.ui-widget-content").delegate('a', 'click', function(event) {
  event.preventDefault();
  $(this).closest('.ui-tabs-panel.ui-widget-content').load(this.href);
});

完了:)タブプラグインを実行した後にこの関数を実行すると、内部のすべてのリンク要素.ui-tabs-panel.ui-widget-contentにより、独自のタブが独自のhrefで強制的にリロードされます

于 2012-06-14T15:32:54.607 に答える