多个切换几乎就像Tabs JavaScript / CSS

Question

I want to create tabs that function like toggles, but instead only one toggle can be active at one time. The content of the tab also needs to be above the the tabs themselves. The problem is I am using a loop to generate the content as well as the tabs themselves.

I've got a nice javascript code right here that works perfectly fine. I understand this perfectly as well. The only problem is that it obviously doesn't disable other toggles when another one is clicked. Also having one "tab" / "toggle" always active. Code that could probably check the div id with a prefix of "post" and make all div id's with "post" to display:none besides the one that was clicked on. That would be perfect if that could be possible. Another way I could think of this is putting all the generated content into a container, and it simply disables all id's in the container besides the one that was clicked.

If this code can be modified to achieve that, it would be great. This is some very simple code that I understand very clearly. All I need is that it behaves more like tabs where only one can be active at once.

<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

Loop 1 - The Content

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

Answer 1

This is also tagged jquery so I'll just recommend that you include the jquery library and include:

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

as the first line in the toggleMeMirror function.

Then, make sure that each of your looped content divs exist in the class "someclass".

like:

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

then

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

You can try something like this DEMO

HTML Code

<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' >");
});