web-dev-qa-db-ja.com

クリックしたときにコンテンツをフラッシュしてロードする記事にタブを実装するにはどうすればよいですか？

具体的には、2つの異なるタブの記事に2つのビデオプレーヤーをロードしています。 1つはライブで、もう1つはオンデマンドです。彼らは一緒にニースを再生しませんが、2つの異なる記事で完全にではなくタブでそれらを利用できるようにするのは素晴らしいです。

私は記事で使用できるタブプラグインまたはタブコードを探していますタブ2では、タブ1がフラッシュされてから、タブ2のコンテンツが読み込まれます。

これは可能ですか、または2つの異なる記事とメニューを使用して、各プレーヤーが異なるページに表示されるようにする必要がありますか？

joomla-2.5
1
Brian Peat

両方のタブにiframeが含まれている場合、$('#iframe').attr('src', 'http://example.com');を使用してiframeコンテンツを設定できます（および$('#iframe').attr('src', '');を空にしてください。小さな jsfiddle（タブなし） を作成しました）= =。このコードは改善できると確信しており、ニーズに合わせて変更する必要がありますが、おそらく正しい方向にプッシュできます。

jQueryコード

jQuery(document).ready(function () {
    jQuery('.tab1').on('click', function (e) {
        $('#iframe2').attr('src', '');
        $('#iframe1').attr('src', 'http://example.com');
        e.preventDefault();
    });
    jQuery('.tab2').on('click', function (e) {
        $('#iframe1').attr('src', '');
        $('#iframe2').attr('src', 'http://example.com');
        e.preventDefault();
    });
});

[〜＃〜] html [〜＃〜]

<ul>
    <li><a href="#tab1" class="tab1">Tab #1</a> </li>
    <li><a href="#tab2" class="tab2">Tab #2</a> </li>
</ul>
<h2>iframe 1:</h2>
<iframe id="iframe1" frameborder="0" src=""></iframe>
<h2>iframe 2:</h2>
<iframe id="iframe2" frameborder="0" src=""></iframe>
1
johanpw