0

特定のタブ内でクリックしたリンクが、実際にその URL をタブ内に呼び出していることを確認したい...ドキュメントには、これを実行できると書かれていますが、ここには、私だけではないことを示す投稿がいくつかあります。問題が発生しています... jQuery UI サイトのコードを試し、このサイトの他の記事の提案を試しました... JS と jQuery に慣れている人にとっては明らかな問題だと確信しています。 .. 助けてください....

これが私が@これまでのところ....（各「試行」はepagの他のコードなしで行う必要があります-ここにあるので、私が試したコードがあり、おそらく共通性を見ることができます）

<script>
$(document).ready(function(){

// trial #1 - specific ID called into tab - doesn't work
$('#tabs-community').tabs('select', 'tabs-signup');

  $('#blogs').click(function() {
      $('#tabs-bboard').load('blogs.cfm');
 });      

// trial #2 - the documented way - doesn't work
$('#tabs-community').tabs({
    load: function(event, ui) {
    $('a', ui.panel).click(function() {
        $(ui.panel).load(this.href);
    return false;
    });
}
});

// trial #3 - suggestion given on this site - doesn't work
$('#tabs-community').tabs({
    load: function(event, ui) {
    $('a', ui.panel).live('click', function() {
        $(ui.panel).load(this.href);
    return false;
    });
}
});

});

</script>       
<article class="col1">
    <div id="tabs-community" >
        <ul>
            <li><a href="#tabs-bboard">Community</a></li>
            <li><a href="#tabs-signup">Sign-up</a></li>
        </ul>
        <div id="tabs-bboard">
            <cfinclude template="bboard.php"><br/>
        </div>
        <div id="tabs-signup">
            <cfinclude template="signup_form.php"><br/>
        </div>
    </div>
</article>

「bboard.php」はこんな感じ

<a href="blogs1.cfm" id="blogs">blogs 1</a>
<a href="blogs2.cfm" >blogs 2</a>
<a href="blogs3.cfm" >blogs 3</a>

すべてのリンクは常に新しいページ呼び出しとして開きます...どの例もリンクをタブにロードしません...

ご協力ありがとうございます。

4

2 に答える 2

0

外部コンテンツを読み込むタブを作成するための基本的なアプローチは次のようになります。

<script>
    $(function() {
        $('#tabs').tabs();
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="/foo.php">foo</a></li>
        <li><a href="/bar.php">bar</a></li>
    </ul>
</div>

あなたの場合、アンカータグのをdivに向ける代わりにhref、コンテンツが配置されているURLに向けてください。

于 2012-06-17T01:11:27.340 に答える
0

わかりました...問題を理解しました。それは単純なものです。ページがロードされ、タブが作成されると、ロード イベントはトリガーされません。すべてのクリック ハンドラーは、タブの読み込みコールバックに埋め込まれており、タブ コンテンツの初期リンクにバインドされることはありません。したがって、最初のリンクはすべて新しいページをロードします。

解決策は、ロード コールバックからクリック ハンドラを取り出すことです。jquery > 1.7live()の使用が推奨されない場合は、on()代わりに使用してください。

デモ: http://jsfiddle.net/c7arQ/

jsfiddle の制約により、デモはわずかに異なる ajax を使用します

$(function() {

    /* delegate click handler to id=tabs to account for future elements */         
    $('#tabs').on('click', '.ui-tabs-panel a', function(){
        /* get parent tab panel to load into */                                             
        var $panel=$(this).closest('.ui-tabs-panel');
        $panel.load(this.href);
        return false;
    });
    $('#tabs').tabs();​

});

編集: $('#blogs') クリック ハンドラーを削除して、重複した読み込みを回避します

于 2012-06-17T01:39:15.737 に答える