web-dev-qa-db-fra.com

Comment puis-je implémenter dans un article des onglets qui vident et chargent du contenu lorsque l'utilisateur clique dessus?

Pour être plus précis, j'ai 2 lecteurs vidéo chargés dans un article sur deux onglets différents. L'un est en direct, l'autre à la demande. Ils ne jouent pas bien ensemble, mais il est agréable de les avoir sur des onglets plutôt que dans deux articles complètement.

Je recherche un plug-in ou même un code de tabulation que je peux utiliser dans l'article pour charger et décharger le contenu de l'onglet, de sorte que lorsque vous êtes sur l'onglet 1, le contenu de l'onglet 2 n'est pas chargé du tout et que vous cliquez Sur l'onglet 2, l'onglet 1 est vidé, puis le contenu de l'onglet 2 est chargé.

est-ce même possible, ou devrais-je simplement utiliser 2 articles différents et un menu afin que chaque joueur soit sur une page différente?

joomla-2.5
1
Brian Peat

Si les deux onglets contiennent des iframes, vous pouvez utiliser $('#iframe').attr('src', 'http://example.com'); pour définir le contenu de l'iframe (et $('#iframe').attr('src', ''); pour le vider. J'ai créé un petit jsfiddle (sans les onglets) =. Je suis sûr que ce code peut être amélioré, et qu’il doit être modifié pour répondre à vos besoins, mais cela vous donnera peut-être un coup de pouce dans la bonne direction:

Code 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