0

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

我在这里有一个很好的 javascript 代码，它工作得非常好。我也完全理解这一点。唯一的问题是，当单击另一个切换时，它显然不会禁用其他切换。还有一个“选项卡”/“切换”始终处于活动状态。代码可能会检查带有“post”前缀的 div id，并使所有带有“post”的 div id 显示：除了被点击的那个之外。如果可能的话，那将是完美的。我能想到的另一种方法是将所有生成的内容放入一个容器中，它只是禁用容器中除了被点击的ID之外的所有ID。

如果可以修改此代码以实现此目的，那就太好了。这是一些我非常清楚地理解的非常简单的代码。我所需要的是它的行为更像是一次只能激活一个的选项卡。

<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 - 实际的切换/选项卡

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

2 回答 2

1

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

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

作为 toggleMeMirror 函数的第一行。

然后，确保每个循环内容 div 都存在于“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;
}
于 2013-01-12T04:26:58.693 回答
0

你可以试试这个DEMO

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' >");
});
于 2013-01-30T06:22:09.667 回答