it-swarm-eu.dev

Come implementare le schede in un articolo che scarica e carica il contenuto quando si fa clic su?

Per essere più specifici, ho 2 lettori video caricati in un articolo in due diverse schede. Uno è in diretta, l'altro è su richiesta. Non giocano a Nice insieme, ma è bello averli disponibili nelle schede anziché in due diversi articoli completamente.

Sto cercando un plug-in a schede o anche solo un codice a schede che posso usare nell'articolo che caricherà e scaricherà il contenuto della scheda in modo che quando sei nella scheda 1, i contenuti della scheda 2 non vengono caricati affatto e quando fai clic nella scheda 2, la scheda 1 viene svuotata e quindi i contenuti della scheda 2 vengono caricati.

è possibile, o dovrei usare solo 2 articoli diversi e un menu in modo che ogni giocatore si trovi su una pagina diversa?

1
Brian Peat

Se entrambe le schede contengono iframe, puoi usare $('#iframe').attr('src', 'http://example.com'); per impostare il contenuto iframe (e $('#iframe').attr('src', ''); per svuotarlo. Ho creato un piccolo jsfiddle (senza le schede) =. Sono sicuro che questo codice può essere migliorato e deve essere modificato per adattarlo alle tue esigenze, ma forse ti darà una spinta nella giusta direzione:

Codice 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