Me he guiado con un ejemplo funcional que me ha dado Javi Mollá
, por lo poco que entendí he realizado cambios en el código.
Mi idea es generar las pestañas de acuerdo con la cantidad de listas de canales de url que existen separadas por comas y al mismo tiempo agregue el canal de la url en cada iframe, eso funciona pero no adecuadamente, no se genera al orden deseado.
Opciones del tabs
<ul class="resp-tabs-list">
<li class="resp-tab-item resp-tab-active"><span data-target="#1">Opción 1</span></li>
<li class="resp-tab-item"><span data-target="#2">Opción 2</span></li>
<li class="resp-tab-item"><span data-target="#3">Opción 3</span></li>
</ul>
Contenedor:
<div id="1" class="resp-tab-content resp-tab-content-active">
<div class="tab-content">
<!-- Div contenedor del iframe -->
<div style="position:relative;width:100%;display:inline-block;"><iframe src="" allowfullscreen style="border:none;position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
</div>
</div>
Este es mi código PHP, que me genera el HTML
.
<div class="container-tabs">
<div id="horizontalTab" style="display: block; margin: 0px; width: 100%;">
<ul class="resp-tabs-list">
<?php
$list_channel = "http://www.example.com/channel/1/,http://www.example.com/channel/2/,https://www.youtube.com/watch?v=ZdP0KM49IVk";
$channels = [];
for ($indexchannel = 0; $indexchannel < 5; $indexchannel++) {
$channels[] = array(
'id' => $indexchannel,
'urls' => $list_channel
);
}
?>
<?php
for ($indexchannel = 0; $indexchannel < count($channels); $indexchannel++) {
$urls = explode(',', $channels[$indexchannel]['urls']);
for ($indexUrl = 0; $indexUrl < count($urls); $indexUrl++) {
?>
<li class="resp-tab-item resp-tab-active"><span data-target="#<?=$indexchannel?>">Option <?=$indexchannel?></span></li>
<div id="<?=$indexchannel?>" class="resp-tab-content resp-tab-content-active">
<div class="tab-content">
<div style="position:relative;width:100%;display:inline-block;">
<iframe src="<?=$urls[$indexUrl]?>" allowfullscreen style="border:none;position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
</div>
</div>
</div>
<?php
}
}
?>
</ul>
</div>
</div>
En el siguiente enlace se puede visualizar los resultados: https://ideone.com/ygTn7j
El diseño que deseo generar con PHP:
jQuery(document).ready(function(){
$(".resp-tab-content").hide();
$("ul.resp-tabs-list li:first").addClass("active").show();
/*Folling line changed to support multi tabs*/
$(".resp-tabs-container .resp-tab-content:first-child").show();
$("ul.resp-tabs-list span").click(function(){
//$("ul.resp-tabs-list a").click(function(){
$("ul.resp-tabs-list li").removeClass("resp-tab-active");
$(this).parent("li").addClass("resp-tab-active");
/*Following line removed to support multi tabs
$(".resp-tab-content").hide();
*/
var activeTab = $(this).attr("data-target");
//var activeTab = $(this).attr("href");
/*Folliwng line added to support multi tabs*/
$(activeTab).siblings(".resp-tab-content").hide();
$(activeTab).fadeIn();
return false;
});
});
ul.resp-tabs-list {
list-style: none;
background: none;
margin: 0 auto;
padding: 0;
display: flex;
border-bottom: solid 1px #EAEAEA;
}
.resp-tab-item {
color: #343a4e;
font-size: .875em;
cursor: pointer;
/*padding: 0 .6em .5em; MOVE THIS TO THE A Style*/
display: inline-block;
list-style: none;
/*float: left; - Don't need this with Flexbox*/
border-bottom: solid 1px #FFFFFF;
outline: none;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
text-transform: capitalize;
}
.resp-tab-item span, .resp-tab-item span:visited, .resp-tab-item span:active, .resp-tab-item span:hover {
text-decoration:none;
color: #343a4e;
list-style: none;
padding: 0 .6em .5em; /*Move from LI style*/
display:inline-block; /*Makes vertical padding meaningful*/
}
.resp-tab-active {
text-shadow: none;
color: #1ca0de;
border-bottom: solid 1px #3E9CCA;
/*padding-bottom: .5em;*/
}
.resp-tabs-container {
padding: 0px;
clear: left;
border-top: none;
background: none;
}
.tab-content {
margin: 1em 0 0 0;
border-bottom: solid 1px #EAEAEA;
padding-bottom: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-tabs">
<div id="horizontalTab" style="display: block; margin: 0px; width: 100%;">
<ul class="resp-tabs-list">
<li class="resp-tab-item resp-tab-active"><span data-target="#1">Option 1</span></li>
<li class="resp-tab-item"><span data-target="#2">Option 2</span></li>
<li class="resp-tab-item"><span data-target="#3">Option 3</span></li>
</ul>
<div class="resp-tabs-container">
<div id="1" class="resp-tab-content resp-tab-content-active">
<div class="tab-content">
<div style="position:relative;width:100%;display:inline-block;"><iframe src="" allowfullscreen style="border:none;position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
</div>
</div>
<div id="2" class="resp-tab-content">
<div class="tab-content">
<div style="position:relative;width:100%;display:inline-block;"><iframe src="" allowfullscreen style="border:none;position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
</div>
</div>
<div id="3" class="resp-tab-content">
<div class="tab-content">
<div style="position:relative;width:100%;display:inline-block;"><iframe src="" allowfullscreen style="border:none;position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
</div>
</div>
</div>
</div>
</div>