Pestañas De Javascript

absolute | around | find | iat | JavaScript | mean | sin

Michael Zippo 04.11.2021

Las pesta√±as CSS son realmente excelentes para mostrar informaciòn asociada en un lugar de fácil navegaciòn. Básicamente, parecen divisores con pesta√±as que verìas en una caja de recetas o una carpeta. A continuaciòn, se muestran algunos ejemplos de sitios web que utilizan la navegaciòn por pesta√±as: & nbsp; & nbsp;

Mientras observa estos dos sitios, piense en las ventajas de utilizar un componente de interfaz de usuario de este tipo en los sitios. ¿Qué problemas resuelve? ¿Para qué tipo de informaciòn serìa una buena implementaciòn la navegaciòn con pesta√±as? & Nbsp;

Cuando necesite buscar una estructura de IU que organice el texto o la informaciòn en componentes significativos y los muestre en la pantalla sin tomar demasiado espacio, la navegaciòn con pesta√±as es una buena elecciòn. Hablaremos sobre la navegaciòn con pesta√±as con más profundidad a medida que nos adentremos en el uso de JavaScript, jQuery y / o Bootstrap, pero también hay una implementaciòn que podrìamos usar que solo requiere HTML y CSS puro. Echemos un vistazo a la configuraciòn:

Configure su HTML:

Contin√∫e y configure su HTML estándar con un contenedor dentro del cuerpo que servirá como nuestro contenedor principal para el proyecto. Puedes llamarlo como quieras en el atributo de clase, pero yo lo llamaré class = " tabs ". Hasta ahora, su HTML deberìa verse asì:

Dentro de las " pestañas " "div", insertaremos otros cuatro "div" sy llamaremos a cada uno con una clase de tab. Esto representa cada una de las cuatro pesta√±as que escribiremos hoy. Contendrá nuestra entrada, etiquetas de pesta√±a y contenido de pesta√±a. Creemos contenedores vacìos para todos esos: & nbsp;

Dentro del nombre de la clase de contenido estará nuestro contenido. Puede usar cualquier contenido que desee, pero es una práctica estándar usar contenido asociado en una pesta√±a.

Hora de iniciar CSS:

Cuando se trata de escribir CSS, comience con el contenedor más grande y trabaje hasta llegar al contenedor más peque√±o. Aquì está el mìnimo que necesitamos qué hacer para que funcione:

1. Establezca un selector de comodines en un box-sizing: border-box.
2. En el contenedor principal, necesitamos tener la propiedad de visualizaciòn configurada en flex y tener la posiciòn configurada como relativa. & nbsp; Pantalla: flex permite que las pesta√±as se coloquen una al lado de la otra en una fila y la posiciòn relativa básicamente act√∫a como un lìmite o cerca que contiene el contenido de la pesta√±a. & Nbsp;

En este punto verá lo que parecen ser cuatro bloques de texto con un botòn de opciòn y algo de contenido. A continuaciòn, tenemos que encontrar una manera de mostrar el bloque marcado y ocultar los otros bloques. & Nbsp;

1. En el contenedor .tab, configuraremos el estilo para la etiqueta:
   1. Borde sòlido de 1px en el color que desee.
   2. Relleno: 5px, 10px & ndash; agregará algo de espacio alrededor del texto de la etiqueta
   3. Radio del borde 10px, 10px, 0px, 0px & ndash; esto hará que la etiqueta se vea más como una pesta√±a tradicional. & nbsp;

Si revisa su trabajo ahora, verá que las etiquetas tienen la radio circular botones a la izquierda de ellos. Por lo tanto, se parece más a una pesta√±a tradicional, pero para mantener el atributo marcado del botòn, debemos ocultar la parte circular del botòn de opciòn. & Nbsp;

1. Para seleccionar el botòn, usamos .tab [type = " radio "]. Para ocultarlo, configuramos la visualizaciòn en ninguno. & Nbsp;

A continuaciòn, debemos abordar el contenido real para que solo muestre una pesta√±a a la vez.

1. Seleccione el div de contenido y luego establezca la posiciòn en absoluta. Cuando se establece la posiciòn absoluta, el div se puede establecer en cualquier lugar dentro del padre relativo. Usando la parte superior, derecha, izquierda e inferior, puede configurar el contenido donde desee dentro del div principal. En este caso, & nbsp; establecer las propiedades izquierda y derecha en 0. También queremos crear un borde y establecer un color de fondo en un color no transparente. & nbsp;

1. Establecer el ìndice z de la pesta√±a seleccionada colocará el panel de esa pesta√±a en la parte superior. Para ello, seleccione el botòn marcado y su contenido. Para hacer esto usamos [type = " radio "]: marcada ~ etiqueta ~ .contenido. El " ~ " entre los elementos en CSS nos dice que queremos la clase de contenido que ocurre después de un elemento de etiqueta que ocurre después de un botòn de radio marcado. & nbsp;

1. Para mostrar qué pesta√±a está activa , establezca [type = " radio "]: etiqueta ~ marcada en un color de fondo diferente. & nbsp;

Ahora, cuando el usuario hace clic en cada una de las pesta√±as, deberìa poder pasar correctamente de una a otra sin ver el contenido de los otros paneles. Esto es lo mìnimo que necesita para que la navegaciòn con pesta√±as funcione. . ¬°Intenta jugar con CSS para cambiar el estilo! A continuaciòn se codifica una implementaciòn funcional: & nbsp;