Я хочу создать вкладки, которые работают как переключатели, но вместо этого может быть активен только один переключатель. Содержимое вкладки также должно быть выше самих вкладок. Проблема в том, что я использую цикл для создания контента, а также самих вкладок.
У меня есть хороший код javascript, который работает отлично. Я это прекрасно понимаю. Единственная проблема заключается в том, что он, очевидно, не отключает другие кнопки при нажатии на другой. Также всегда активен один «вкладка» / «переключение». Код, который, вероятно, может проверить идентификатор div с префиксом «post» и сделать все div id с «post» для отображения: none кроме того, на который был нажат. Это было бы прекрасно, если бы это было возможно. Еще один способ, который я мог бы подумать об этом, – положить все сгенерированное содержимое в контейнер, и он просто отключает все идентификаторы в контейнере, кроме того, который был нажат.
Если этот код может быть изменен для достижения этого, было бы здорово. Это очень простой код, который я понимаю очень четко. Все, что мне нужно, это то, что он ведет себя больше как вкладки, в которых только один может быть активным сразу.
<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 – Содержание
<?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 – Фактические переключатели / вкладки
<?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 и включить:
$('.someclass').hide();
как первая строка в функции toggleMeMirror.
Затем убедитесь, что каждый из ваших замкнутых контуров контента существует в классе «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; }
Вы можете попробовать что-то вроде этого DEMO
Код HTML
<div id="one"><img src='http://img.ruphp.com/php/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='50px' widht='50px' ></div><br> <div id="two"><img src='http://img.ruphp.com/php/Spongebob Reading.png' height='50px' widht='50px' ></div><br> <div id="three"><img src='http://img.ruphp.com/php/Spongebob Waving.png' height='50px' widht='50px' ></div><br><br> <div id="thumb"><img src='http://img.ruphp.com/php/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' ></div>
JQuery
$("#one").click(function() { $("#thumb").html("<img src='http://img.ruphp.com/php/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' >"); }); $("#two").click(function() { $("#thumb").html("<img src='http://img.ruphp.com/php/Spongebob Reading.png' height='200px' widht='200px' >"); }); $("#three").click(function() { $("#thumb").html("<img src='http://img.ruphp.com/php/Spongebob Waving.png' height='200px' widht='200px' >"); });