K
kenyieduca
Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
hola a todos ... espero estén super bien .... busco ayuda sobre tabs con pestañas en HTML, pero que cada opción se carguen al momento de activarlo por que la pagina se tarda un montón en cargar esto debido a los videos pesados que están colocados en cada opción de estas pestañas y también cuando reproduzco un video y presiono otra opción este video sigue reproduciendo por lo que yo quiero que ya no reproduzca mientras selecciono otras opciones....
Yo ya tengo el código completo se los voy a dejar por que quiero incorporarlo en eso ... quien seria el héreo que me ayudaría en esto, estoy que busco y busco y no encuentro información.
Aquí se los dejo el código que ya tengo por favor su ayuda (es para blogger)
Yo ya tengo el código completo se los voy a dejar por que quiero incorporarlo en eso ... quien seria el héreo que me ayudaría en esto, estoy que busco y busco y no encuentro información.
Aquí se los dejo el código que ya tengo por favor su ayuda (es para blogger)
Insertar CODE, HTML o PHP:
<html>
<head>
<script src='https://code.jquery.com/jquery-3.2.1.min.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$(".contenido_tab").hide(); //Ocultar capas
$("ul.tabs li:first").addClass("activa").show(); //Activar primera pestaña
$(".contenido_tab:first").show(); //Mostrar contenido primera pestaña
// Sucesos al hacer click en una pestaña
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("activa"); //Borrar todas las clases "activa"
$(this).addClass("activa"); //Añadir clase "activa" a la pestaña seleccionada
$(".contenido_tab").hide(); //Ocultar todo el contenido de la pestaña
var activatab = $(this).find("a").attr("href"); //Leer el valor de href para identificar la pestaña activa
$(activatab).fadeIn(); //Visibilidad con efecto fade del contenido activo
return false;
});
});
</script>
<b:skin><![CDATA[/*
ul.tabs{width:100%;max-width:800px;margin:0 auto;padding:0;list-style:none;height:32px;font-size:0;line-height:0;}
ul.tabs li{display:inline-block;width:33.33%;margin:0;padding:0;height:32px;line-height:32px;background:#333;overflow:hidden;position:relative;border:1px solid #333;border-bottom:0;box-sizing:border-box;border-radius:7px 7px 0 0;}
ul.tabs li a{display:block;padding:0 5px;text-decoration:none;color:#fff;font-size:14px;text-align:center;border:1px solid #CCC;box-sizing:border-box;border-radius:7px 7px 0 0;}
ul.tabs li a:hover{background:#666;}
ul.tabs li.activa,ul.tabs li.activa a,ul.tabs li.activa a:hover{color:#333;font-weight:700;background:#ccc;}
.contenedor_tab{width:100%;max-width:800px;margin:-1px auto 0;padding:0;background:#ccc;border:1px solid #333;border-top:0;box-sizing:border-box;border-radius:0 0 7px 7px;}
.contenido_tab{padding:10px;font-size:14px;box-sizing:border-box;}
]]></b:skin>
</head>
<body>
<ul class="tabs">
<li><a href="#tab1"> Opción 1</a></li>
<li><a href="#tab2"> Opción 2</a></li>
<li><a href="#tab3"> Opcion 3</a></li>
</ul>
<div class="contenedor_tab">
<div id="tab1" class="contenido_tab">
<iframe allowfullscreen="" frameborder="0" height="360" marginheight="0" marginwidth="0" scrolling="no" src="https://uqload.com/embed-1gp114w646kq.html" </iframe>
</div>
<div id="tab2" class="contenido_tab">
<iframe allowfullscreen="" frameborder="0" height="360" marginheight="0" marginwidth="0" scrolling="no" src=" https://upstream.to/embed-rd7kpo5tsbjt.html " </iframe>
</div>
<div id="tab3" class="contenido_tab">
<iframe allowfullscreen="" frameborder="0" height="360" marginheight="0" marginwidth="0" scrolling="no" src=" https://uqload.com/embed-1gp114w646kq.html " </iframe>
</div>
</div>
</body>
</html>
