Trabajar con pestañas en jQuery
En la publicación de hoy, aprenderemos sobre las pestañas en jQuery.
Pestañas en jQuery
Las Pestañas son un área de contenido único con múltiples áreas, cada una asociada con un encabezado en una lista. Las pestañas se utilizan normalmente para dividir el contenido en varias secciones que se pueden intercambiar como un acordeón para ahorrar espacio.
Las pestañas tienen un conjunto seleccionado de marcado que debe usarse para que funcionen correctamente:
- Las propias
pestañasdeben estar en una lista Ordenada o No Ordenada. - Cada pestaña
títulodebe estar dentro de un elemento de lista y debe ir acompañada de un ancla con un atributo href para envolver. - Cada panel de pestañas puede ser cualquier elemento válido, pero debe tener una identificación que coincida con el hash en el ancla de la pestaña asociada.
El contenido de cada panel de pestañas se puede definir en la página web o cargar a través de Ajax; ambos se manejan automáticamente en función del href del ancla asociada a la pestaña. Las pestañas predeterminadas se activan al hacer clic en.
Sin embargo, los eventos se pueden modificar para pasar el cursor sobre la opción de eventos. Entendámoslo con el siguiente ejemplo.
Código - HTML:
<ul id="tabs">
<li><a id="home">Home</a></li>
<li><a id="about">About</a></li>
</ul>
<div class="container" id="homeC">Home Screen</div>
<div class="container" id="aboutC">About Us</div>
Código - CSS:
#tabs {
width: 100%;
height:30px;
border-bottom: solid 1px #CCC;
padding-right: 2px;
margin-top: 30px;
}
a {cursor:pointer;}
#tabs li {
float:left;
list-style:none;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
margin-right:5px;
border-top-left-radius:3px;
border-top-right-radius:3px;
outline:none;
}
#tabs li a {
font-family:Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
color: #5685bc;;
padding-top: 5px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 8px;
display:block;
background: #FFF;
border-top-left-radius:3px;
border-top-right-radius:3px;
text-decoration:none;
outline:none;
}
#tabs li a.inactive{
padding-top:5px;
padding-bottom:8px;
padding-left: 8px;
padding-right: 8px;
color:#666666;
background: #EEE;
outline:none;
border-bottom: solid 1px #CCC;
}
#tabs li a:hover, #tabs li a.inactive:hover {
color: #5685bc;
outline:none;
}
.container {
clear:both;
width:100%;
border-left: solid 1px #CCC;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
text-align:left;
padding-top: 20px;
}
.container h2 { margin-left: 15px; margin-right: 15px; margin-bottom: 10px; color: #5685bc; }
.container p { margin-left: 15px; margin-right: 15px; margin-top: 10px; margin-bottom: 10px; line-height: 1.3; font-size: small; }
.container ul { margin-left: 25px; font-size: small; line-height: 1.4; list-style-type: disc; }
.container li { padding-bottom: 5px; margin-left: 5px;}
Código - JavaScript:
$(document).ready(function() {
$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li a').click(function() {
var t = $(this).attr('id');
if ($(this).hasClass('inactive')) {
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$('#' + t + 'C').fadeIn('slow');
}
});
});
En el ejemplo anterior, hemos definido pestañas con una etiqueta ul que enumerará todas las pestañas. El contenido de las pestañas se ocultará de forma predeterminada mediante el método ocultar y, de forma predeterminada, la primera pestaña será visible.
Una vez que el usuario haga clic en cualquier pestaña, aplicará la clase .inactive a todos los elementos de la lista y eliminará la clase .inactive del elemento de la lista seleccionado. Esto asegurará que solo el elemento de la lista seleccionado se active en un momento dado.
Intente ejecutar el fragmento anterior en cualquier navegador que admita jQuery y mostrará el siguiente resultado.
Producción:
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn