多个切换几乎就像Tabs JavaScript/CSS [英] Multiple Toggles Almost like Tabs JavaScript/ CSS

问题描述

我想创建功能类似于切换键的选项卡，但是一次只能激活一个切换键.选项卡的内容还需要在选项卡本身上方.问题是我正在使用循环来生成内容以及选项卡本身.

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.

我在这里有一个不错的javascript代码，可以很好地工作.我也很了解这一点.唯一的问题是，当单击另一个开关时，它显然不会禁用其他开关.同时具有一个选项卡"/切换"始终处于活动状态.代码可能会检查前缀为"post"的div id，并使所有带有"post"的div id都显示出来:如果可能的话，那将是完美的.我可以想到的另一种方式是将所有生成的内容放入一个容器中，并且它只是禁用了该容器中除单击的ID之外的所有ID.

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

循环1-内容

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

循环2-实际的切换/标签

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

推荐答案

这也被标记为jquery，所以我只建议您包括jquery库并包括:

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

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

作为toggleMeMirror函数的第一行.

as the first line in the toggleMeMirror function.

然后，确保每个循环的内容div都存在于"someclass"类中.

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

喜欢:

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

然后

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

这篇关于多个切换几乎就像Tabs JavaScript/CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！