10

だから私のスクリプトは次のようになります

function() {
    $( "#tabs" ).tabs();
});

function Wczytaj(link, div_id, parametr1, parametr2, parametr3)
{
   $.ajax(link, { data: { par1: parametr1, par2: parametr2, par3: parametr3 },
   type: "post",
     success: function(data) {
       $('#'+div_id).fadeOut("medium", function(){
       $(this).append(data);
      $('#'+div_id).fadeIn("medium");
     });
  }
 });
}

<div id="tabs">
    <ul>
        <li><a href="#id1" onClick="Wczytaj('trouble2.php','id1','null','null','null');">My id 1</a></li>
        <li><a href="#id2" onClick="Wczytaj('trouble2.php?action=lista','id2','null','null','null');">My id 2</a></li>
        <li><a href="#id3" onClick="Wczytaj('troubl2.php?action=old','id3','null','null','null');">My id3</a></li>
    </ul>

    <div id="id1"></div>
    <div id="id2"></div>
    <div id="id3"></div>
</div>

問題なく動作しますが、たとえば、div コンテンツを読み込むために URL アドレスも使用したい場合は、http://myurl.com/page.php#id2選択したタブを含むページを読み込む必要があります。動作しますが、属性id2のために div が空です。onClick修正方法は？

私の英語で申し訳ありません

4

3 に答える 3

21

タブに AJAX をロードするために独自の関数を使用する必要はありません。jQuery がこれを行うことができます。を URL に設定するだけhrefで、s は追加しないでください<div>。

<div id="tabs">
    <ul>
        <li><a href="trouble2.php">My id 1</a></li>
        <li><a href="trouble2.php?action=lista">My id 2</a></li>
        <li><a href="trouble2.php?action=old">My id3</a></li>
    </ul>
</div>

jQuery はタブを作成し、AJAX を介してページを自動的に読み込みます。ここのドキュメントを参照してください: http://jqueryui.com/tabs/#ajax

それはまたあなたの<div>ためになります。この例ui-tabs-XでXは、 はタブ インデックスです。したがって、http://myurl.com/page.php#ui-tabs-22 番目のタブを開いた状態でページをロードする必要があります。

ここで jQuery のデモをチェックしてください: http://jqueryui.com/resources/demos/tabs/ajax.html#ui-tabs-2

EDIT : リモート タブが読み込まれる前または後に関数を実行する場合、jQuery UI はtabsbeforeloadおよびtabsloadイベントを提供します。

タブを作成するときにバインドできます。

$('#tabs').tabs({
    beforeLoad: function(event, ui){
        alert('loading');
    },
    load: function(event, ui){
        alert('loaded');
    }
});

または、後でバインドすることもできます。

$('#tabs').on('tabsbeforeload', function(event, ui){
    alert('loading');
});

$('#tabs').on('tabsload', function(event, ui){
    alert('loaded');
});
于 2013-01-16T15:11:43.757 に答える
1

Jquery でタブ ajax コンテンツをロードする前に、href URL をリセットします。

$( "#pending_recs" ).tabs({
    beforeLoad: function( event, ui ) {
        var filter_url = get_url();
        var url_str = site_url+'/admin/pending_recs/'+filter_url+"/0";

        $("#pending_recs .ui-tabs-nav .ui-state-active a").attr('href',url_str);

        ui.panel.html('<div class="loading">Loading...</div>');

        ui.jqXHR.error(function() {
            ui.panel.html('<div align="center"><p>Unable to load the content, Please <a href="javascript:void(0)" onclick="return load_contents();">Click here to Reload</a>.</p></div>');
        });
    }
    ,load:function( event, ui ) { /* After page load*/  }
});
于 2015-01-30T11:24:17.727 に答える
0

href各タブリンクの属性を、ロードするはずの ajax URL に設定するだけで動作するはずです。

それをしたくない場合は、onClick属性を削除してください。問題は、ページが特定のタブを選択するためのトリガーを読み込むとき#id2に、クリック要素がバインドされる前に発生することです。その前にクリック ハンドラーをバインドし、問題のタブがフラグメントによって選択されたときに対応するハンドラーを呼び出す必要があります。

于 2013-01-16T15:10:16.777 に答える