0

トグルのように機能するタブを作成したいのですが、代わりに一度にアクティブにできるトグルは1つだけです。タブのコンテンツも、タブ自体の上にある必要があります。問題は、ループを使用してコンテンツとタブ自体を生成していることです。

私はここに完璧に動作する素晴らしいjavascriptコードを持っています。私もこれを完全に理解しています。唯一の問題は、別のトグルがクリックされたときに、他のトグルが明らかに無効にならないことです。また、1つの「タブ」/「トグル」を常にアクティブにします。プレフィックスが「post」のdividをチェックし、「post」が付いたすべてのdiv idを表示するコード：クリックされたもの以外はありません。それが可能であれば、それは完璧でしょう。これを考える別の方法は、生成されたすべてのコンテンツをコンテナーに入れることです。これは、クリックされたもの以外のコンテナー内のすべてのIDを無効にするだけです。

このコードを変更してそれを実現できれば、それは素晴らしいことです。これは私が非常に明確に理解しているいくつかの非常に単純なコードです。必要なのは、一度に1つしかアクティブにできないタブのように動作することだけです。

<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 に答える