¿Cómo crear pestañas con CSS y JavaScript?

HTML” pestañas ”son los bloques que almacenan el contenido de un sitio web en trozos. Se utilizan para mostrar el contenido almacenado mediante múltiples enfoques, como hacer clic con el mouse, hacer doble clic, pasar el cursor y mucho más. Las pestañas proporcionan la forma más sencilla de navegar por las diferentes páginas web de un sitio web. Además, también ayudan a gestionar el espacio y hacer que el sitio web sea más atractivo y llamativo.

Esta guía explicará cómo crear pestañas con CSS y JavaScript.

¿Cómo crear pestañas con CSS y JavaScript?

Esta sección lleva a cabo instrucciones paso a paso para la creación de pestañas con CSS y JavaScript.

Paso 1: crear una estructura de pestañas usando HTML

Primero, observe el código HTML que crea la estructura de pestañas HTML:

< identificación div = 'pestaña1' al hacer clic = 'primero()' > Hogar div >

< identificación div = 'pestaña2' al hacer clic = 'segundo();' > Acerca de div >

< identificación div = 'pestaña3' al hacer clic = 'tercero();' > Contáctenos div >

< hermano />

< identificación div = 'cont1' > Bienvenido a Linuxhint ! div >

< identificación div = 'cont2' > EDUCACION TECNOLÓGICA

Hemos creado muchos productos para ayudarlo a aprender sobre Linux, programación, informática y más.

div >

< identificación div = 'cont3' >

Puede ponerse en contacto con nuestro equipo en el editor AT linuxhint DOT com.

div >

En las líneas de código anteriores:

El '
La etiqueta 'agrega un elemento div con una identificación' tab1 'y un' adjunto al hacer clic 'Evento para ejecutar el enlace' primero() ”funciona cuando se hace clic en él. Este elemento actúa como una pestaña HTML.
El método anterior se realiza para los siguientes dos elementos div.
El '
La etiqueta 'añade un salto de línea.
El '
'La etiqueta nuevamente inserta un elemento div que tiene una identificación asignada 'cont1'. Este elemento muestra el contenido de la pestaña creada en un bloque.
Los dos siguientes”
Las etiquetas ”también agregan elementos div con sus identificadores asignados.

Paso 2: Aplicar estilo a las pestañas usando CSS

Ahora, aplique las propiedades de estilo CSS para personalizar las pestañas y su contenido según su elección:

< estilo >

#pestaña1, #pestaña2, #pestaña3 {

flotar : izquierda ;

relleno : 5 px 10 px 5 px 10 px ;

fondo : rojo naranja ;

color : #FFFFFF ;

margen : 0px 5px 0px 5px ;

cursor : puntero ;

borde - radio : 3px ;

}

#pestaña1 : flotar, #tab2 : flotar, #tab3 : flotar {

fondo : verde ;

}

#cont1, #cont2, #cont3 {

ancho : 300px ;

altura : 100px ;

relleno : 40px ;

fuente - tamaño : medio ;

fuente - familia : 'Times New Roman' , tiempos, serifa ;

borde : 2px sólido naranjarojo ;

borde - radio : 7px ;

mostrar : ninguno ;

}

estilo >

En el fragmento de código indicado:

En primer lugar, acceda al “ pestañas ”usando sus identificadores asignados y personalícelos a través de las siguientes propiedades de estilo (flotante, relleno, fondo, color, margen: 0px 5px 0px 5px, cursor y radio de borde).
A continuación, adjunte el ' flotar ”controlador de eventos con las pestañas para cambiar sus colores de fondo cuando el usuario pasa el mouse sobre ellas.
Después de eso, acceda al “ contenido de pestañas ”almacenado en los elementos div cuyos identificadores son “cont1”, “cont2” y “cont3”. Ahora, aplique las siguientes propiedades de estilo (ancho, alto, relleno, tamaño de fuente, familia de fuentes, borde, radio del borde y visualización).

Paso 3: agregue funcionalidades a las pestañas usando JavaScript

Por último, agrega funcionalidades a las pestañas creadas con la ayuda de JavaScript:

< guion >

funcionar primero ( ) {

documento. obtenerElementoPorId ( 'cont1' ) . estilo . mostrar = 'bloquear' ;

documento. obtenerElementoPorId ( 'cont2' ) . estilo . mostrar = 'ninguno' ;

documento. obtenerElementoPorId ( 'cont3' ) . estilo . mostrar = 'ninguno' ;

}

función segunda ( ) {

documento. obtenerElementoPorId ( 'cont2' ) . estilo . mostrar = 'bloquear' ;

documento. obtenerElementoPorId ( 'cont1' ) . estilo . mostrar = 'ninguno' ;

documento. obtenerElementoPorId ( 'cont3' ) . estilo . mostrar = 'ninguno' ;

}

función tercera ( ) {

documento. obtenerElementoPorId ( 'cont3' ) . estilo . mostrar = 'bloquear' ;

documento. obtenerElementoPorId ( 'cont1' ) . estilo . mostrar = 'ninguno' ;

documento. obtenerElementoPorId ( 'cont2' ) . estilo . mostrar = 'ninguno'

}

guion >

Las líneas de código anteriores:

Defina una función llamada “ primero ”.
En esta definición de función, el “ documento.getElementById() El método accede al elemento div cuyo id es “cont1” y aplica el método “ estilo ” propiedad con un “ bloquear ”valor en él. Esta propiedad mostrará el contenido de la pestaña en la que el usuario hace clic.
A continuación, 'document.getElementById()' accede a otro div y aplica la propiedad 'estilo' que tiene un valor 'ninguno' para ocultarlo. Ocultará ese elemento en la página web.
El método anterior se realiza para los siguientes elementos div a los que se accede. Esto se debe a que la “primera” función solo muestra el contenido de la pestaña cuyo valor de propiedad “estilo” es “bloque” y oculta las demás.
El procedimiento anterior se realiza para las siguientes funciones “segunda()” y “tercera()”.

Producción

Se puede ver que las pestañas se crearon correctamente y muestran su contenido respectivo cuando el usuario hace clic.

Conclusión

Para crear pestañas, primero cree sus estructuras usando 'HTML' y luego personalícelas con la ayuda de las propiedades de estilo CSS. Las propiedades de estilo se agregan sin exportar ninguna hoja de estilo adicional. Estas propiedades hacen que las pestañas sean atractivas y llamativas. Una vez creadas y personalizadas las pestañas, utilice el lenguaje de programación JavaScript para agregarles funcionalidades. Esta guía ha explicado prácticamente el procedimiento completo para crear pestañas con CSS y JavaScript.

¿Cómo crear pestañas con CSS y JavaScript?