ti-enxame.com

Como implementar guias em um artigo que libera e carrega conteúdo quando clicado?

Para ser mais específico, tenho dois reprodutores de vídeo carregados em um artigo em duas guias diferentes. Um é ao vivo, o outro é sob demanda. Eles não jogam Nice juntos, mas é bom tê-los disponíveis em guias em vez de em dois artigos diferentes completamente.

Estou procurando um plug-in de guia ou mesmo apenas um código de guia que possa ser usado no artigo que carregará e descarregará o conteúdo da guia para que, quando você estiver na guia 1, o conteúdo da guia 2 não seja carregado e quando você clicar em na guia 2, a guia 1 é liberada e o conteúdo da guia 2 é carregado.

isso é possível, ou devo usar apenas 2 artigos diferentes e um menu para que cada jogador esteja em uma página diferente?

1
Brian Peat

Se as duas guias contiverem iframes, você poderá usar $('#iframe').attr('src', 'http://example.com'); para definir o conteúdo do iframe (e $('#iframe').attr('src', ''); para esvaziá-lo. Eu criei um pequeno jsfiddle (sem as guias) =. Tenho certeza de que esse código pode ser aprimorado e precisa ser alterado para atender às suas necessidades, mas talvez ele lhe dê um empurrão na direção certa:

Código 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