Ich möchte Registerkarten erstellen, die wie Umschaltflächen funktionieren, aber stattdessen kann immer nur eine Umschaltfläche aktiv sein. Der Inhalt der Registerkarte muss sich auch über den Registerkarten befinden. Das Problem ist, dass ich eine Schleife verwende, um den Inhalt sowie die Registerkarten selbst zu generieren.

Ich habe hier einen netten Javascript-Code, der einwandfrei funktioniert. Ich verstehe das auch perfekt. Das einzige Problem ist, dass es offensichtlich keine anderen Schalter deaktiviert, wenn auf einen anderen geklickt wird. Außerdem ist immer ein "Tab" / "Toggle" aktiv. Code, der wahrscheinlich die Div-ID mit dem Präfix "post" überprüfen und alle Div-IDs mit "post" anzeigen lassen könnte: keine außer der, auf die geklickt wurde. Das wäre perfekt, wenn das möglich wäre. Eine andere Möglichkeit, die ich mir vorstellen kann, besteht darin, den gesamten generierten Inhalt in einen Container zu stellen. Dabei werden lediglich alle IDs im Container deaktiviert, außer denen, auf die geklickt wurde.

Wenn dieser Code geändert werden kann, um dies zu erreichen, wäre es großartig. Dies ist ein sehr einfacher Code, den ich sehr gut verstehe. Alles, was ich brauche, ist, dass es sich eher wie Registerkarten verhält, auf denen nur eine aktiv sein kann.

<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

Schleife 1 - Der Inhalt

<?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; ?>

Loop 2 - Die aktuellen Toggles / Tabs

<?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; ?>