Recientemente tuve que presentar multiple informacion usando pestañas para un sitio online. Usando la manera regular de hacer el contenido usando JavaScript tuve inconvenientes expecificamente con el sitio debido a no reconocer la opcion «click()« para mantener una de las pestañas abiertas.
La opción para esto de manera rapida y simple fue crear lo mismo usando solo HTML y CSS, y aqui les dejo el como crear pestañas sin el uso de javascript.
El Codigo HTML
El contenido HTML va a estar elaborado por «input» y «label» para las pestañas y el contenido que se presentara normalmente para cada opcion.
<input class="inputab" type="radio" name="tabs" id="ptab1" checked/>
<label class="lbltab" for="ptab1">Pestaña 1</label>
<input class="inputab" type="radio" name="tabs" id="ptab2"/>
<label class="lbltab" for="ptab2">Pestaña 2</label>
<!-- El contenido -->
<div class="tabcnt tabcontent1">El Contenido de la pestaña 1</div>
<div class="tabcnt tabcontent1">El Contenido de la pestaña 2</div>Este es el resultado primario. Como podran ver, solo voy a usar radio buttons, labels y los divs que incluiran el contenido para presentar por cada pestaña. Si en algun momento necesitan agregar nuevas pestañas, recuerden aumentar el numero en el «id=ptab#» y ademas en la clase para el contenido, en este caso «tabcontent#«.
El Estilo de las Pestañas – CSS
Una vez tenemos el contenido, pasaremos para el estilo
<style>
.inputab{display: none;}
.inputab + .lbltab{display: inline-block;background-color: #555;color: white;cursor: pointer;padding: 14px 16px;font-size: 18px;width: 50%; font-weight: 700;float: left;text-align: center;margin-bottom: 30px;}
.inputab ~ .tabcnt{display: none;}
#ptab1:checked ~ .tabcnt.tabcontent1, #ptab2:checked ~ .tabcnt.tabcontent2{display: block;}
#ptab1:checked + .lbltab, #ptab2:checked + .lbltab{background-color: #ccc;color: #333;}
</style>Y el resultado final vendra siendo este a continuacion:
