it-swarm-es.tech

¿Cómo implemento pestañas en un artículo que vacía y carga contenido cuando se hace clic en él?

Para ser más específico, tengo 2 reproductores de video cargados en un artículo en dos pestañas diferentes. Uno es en vivo, el otro es a pedido. No juegan Niza juntos, pero es bueno tenerlos disponibles en pestañas en lugar de en dos artículos diferentes por completo.

Estoy buscando un complemento de pestaña o incluso solo un código de pestaña que pueda usar en el artículo que cargará y descargará el contenido de la pestaña para que cuando esté en la pestaña 1, el contenido de la pestaña 2 no se cargue en absoluto, y cuando haga clic en la pestaña 2, la pestaña 1 se vacía y luego se carga el contenido de la pestaña 2.

¿es esto posible, o debería usar solo 2 artículos diferentes y un menú para que cada jugador esté en una página diferente?

1
Brian Peat

Si ambas pestañas contienen iframes, puede usar $('#iframe').attr('src', 'http://example.com'); para configurar el contenido del iframe (y $('#iframe').attr('src', ''); para vaciarlo. Hice un pequeño jsfiddle (sin las pestañas) =. Estoy seguro de que este código puede mejorarse y debe cambiarse para que se ajuste a sus necesidades, pero tal vez le dé un empujón en la dirección correcta:

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