Plusieurs bascules Presque comme des onglets JavaScript/CSS

Question

Je veux créer des onglets qui fonctionnent comme des boutons, mais à la place, un seul bouton peut être actif à la fois. Le contenu de l'onglet doit également être au-dessus des onglets eux-mêmes. Le problème est que j'utilise une boucle pour générer le contenu ainsi que les onglets eux-mêmes.

J'ai un bon code javascript ici qui fonctionne parfaitement bien. Je comprends parfaitement cela aussi. Le seul problème est qu'il ne désactive évidemment pas les autres interrupteurs quand un autre est cliqué. Avoir également un "onglet"/"bascule" toujours actif. Code qui pourrait probablement vérifier l'ID div avec un préfixe de "post" et rendre tous les ID de div avec "post" à afficher: aucun autre que celui sur lequel on a cliqué. Ce serait parfait si cela était possible. Une autre façon de penser à ceci est de placer tout le contenu généré dans un conteneur, et il désactive simplement tous les identifiants du conteneur en plus de celui sur lequel on a cliqué.

Si ce code peut être modifié pour y parvenir, ce serait génial. C'est un code très simple que je comprends très clairement. Tout ce dont j'ai besoin, c'est qu'il se comporte plus comme des onglets où un seul peut être actif à la fois.

<script type="text/javascript"> 
function toggleMeMirror(a){ 
    var e=document.getElementById(a); 
    if(!e) return true; 
    if(e.style.display=="none"){ 
     e.style.display="inline" 
    } else { 
     e.style.display="none" 
    } 
    return true; 
} 
</script> 

HTML/PHP

boucle 1 - Le contenu

<?php while ($queryepisodemirrors->have_posts()) : $queryepisodemirrors->the_post(); ?> 
     <?php if(get_post_meta(get_the_ID(), 'parentIDmirror', true) == $postIDCheck) { ?> 

     <div id="post-<?php the_ID(); ?>" style="display:none;"> 
        <center><?php the_title(); ?><br /><br /> 
        <?php echo get_post_meta(get_the_ID(), 'mirror_embed_code', true); ?> 
        <?php wprp(true);?> 
       </center> 
     </div> 
     <?php } ?> 
<?php endwhile; ?> 

boucle 2 - Les onglets réels/permet de basculer

<?php while ($queryepisodemirrors->have_posts()) : $queryepisodemirrors->the_post(); ?> 
     <?php if(get_post_meta(get_the_ID(), 'parentIDmirror', true) == $postIDCheck) { ?> 
     <div style="float: left; padding: 4px;"> 
     <center> 



     <div class="post-<?php the_ID(); ?>" onclick="return toggleMeMirror('post-<?php the_ID(); ?>')" > 
      <div style="overflow: hidden; width: 150px; height: 100px;"> 
       <div style="background: rgb(0, 0, 0) transparent; /* fallback color */ background: rgba(0, 0, 0, 0.8); color: white; padding: 2px;"> 
        <center> 

         <?php echo get_post_meta(get_the_ID(), 'video_provider', true); 
         echo ' Mirror';?> 
        </center> 
       </div> 
       <img src="<?php echo $thumbnail_src; ?>" width="150px"/> 

      </div> 
     </div> 


     </center> 
     </div> 

     <?php } ?> 
<?php endwhile; ?> 

Answer 1

Ceci est également étiqueté jquery donc je vais recommandez simplement d'inclure la bibliothèque jquery et d'inclure:

$('.someclass').hide(); 

comme première ligne de la fonction toggleMeMirror. Puis, assurez-vous que chacune de vos divs contenu en boucle existe dans la classe "someclass".

comme:

foreach($this as $that) { 
    print "<div class='someclass'>$that</div>"; 
} 

puis

function toggleMeMirror(a){ 
    // hide all 
    $('.someclass').hide(); 
    // show one 
    var e=document.getElementById(a); 
    if(!e) return true; 
     if(e.style.display=="none"){ 
      e.style.display="inline" 
     } else { 
      e.style.display="none" 
     } 
    return true; 
} 

Answer 2

Vous pouvez essayer quelque chose comme ça DEMO

Code HTML

<div id="one"><img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='50px' widht='50px' ></div><br> 
<div id="two"><img src='http://ww2.valdosta.edu/~mecarter/Spongebob%20Reading.png' height='50px' widht='50px' ></div><br> 
<div id="three"><img src='http://www.cliffdweller.com/blogPhotos/wrappingpaperbase/Spongebob%20Waving.png' height='50px' widht='50px' ></div><br><br> 
<div id="thumb"><img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' ></div> 

jQuery

$("#one").click(function() { 
    $("#thumb").html("<img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' >"); 
}); 

$("#two").click(function() { 
    $("#thumb").html("<img src='http://ww2.valdosta.edu/~mecarter/Spongebob%20Reading.png' height='200px' widht='200px' >"); 
}); 

$("#three").click(function() { 
    $("#thumb").html("<img src='http://www.cliffdweller.com/blogPhotos/wrappingpaperbase/Spongebob%20Waving.png' height='200px' widht='200px' >"); 
});