it-swarm-id.com

Bagaimana cara menerapkan tab dalam artikel yang menyiram dan memuat konten saat diklik?

Untuk lebih spesifik, saya punya 2 pemutar video yang dimuat ke dalam artikel di dua tab yang berbeda. Yang satu hidup, yang lain on-demand. Mereka tidak bermain Senang bersama, tapi Senang memiliki mereka tersedia di tab bukan di dua artikel yang berbeda sepenuhnya.

Saya mencari plugin tab atau bahkan hanya kode tab yang dapat saya gunakan di artikel yang akan memuat dan membongkar konten tab sehingga ketika Anda berada di tab 1, konten tab 2 tidak dimuat sama sekali, dan ketika Anda mengklik pada tab 2, tab 1 memerah dan kemudian konten tab 2 dimuat.

apakah ini mungkin, atau haruskah saya menggunakan 2 artikel dan menu yang berbeda sehingga setiap pemain ada di halaman yang berbeda?

1
Brian Peat

Jika kedua tab berisi iframe, Anda dapat menggunakan $('#iframe').attr('src', 'http://example.com'); untuk mengatur konten iframe (dan $('#iframe').attr('src', ''); untuk mengosongkannya. Saya membuat small jsfiddle (tanpa tabs) =. Saya yakin kode ini dapat ditingkatkan, dan harus diubah agar sesuai dengan kebutuhan Anda, tetapi mungkin itu akan memberi Anda dorongan ke arah yang benar:

kode 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