Pestañas en JavaScript
Ahora implementaremos pestañas. Primero mire el ejemplo de lo que se requiere:
Estudie también el marcado en el que resolveremos la tarea:
<div id="parent">
<div class="menu">
<a href="" class="active">pestaña 1</a>
<a href="">pestaña 2</a>
<a href="">pestaña 3</a>
</div>
<div class="tabs">
<div class="tab active">
texto de pestaña 1
</div>
<div class="tab">
texto de pestaña 2
</div>
<div class="tab">
texto de pestaña 3
</div>
</div>
</div>
#parent {
margin: 0 auto;
width: 400px;
}
.menu a {
margin-right: 5px;
display: inline-block;
padding: 10px;
color: black;
text-decoration: none;
border: 1px solid gray;
}
.menu a:hover {
background: #f8f8f8;
}
.menu a.active {
border-color: transparent;
background: #f2f2f2;
}
.tabs .tab:not(.active) {
display: none;
}
.tabs .tab {
padding: 10px;
background: #f2f2f2;
height: 300px;
}
Preste atención al hecho de que el enlace activo
y la pestaña activa tienen la clase active.
Discusión
Ahora discutamos cómo resolver esta tarea. Obviamente, es necesario relacionar de alguna manera los enlaces con sus pestañas correspondientes. En esta lección del libro de teoría ya analizamos las posibles opciones.
En este caso, propongo relacionar los enlaces y las pestañas simplemente por posición: el primer enlace abrirá la primera pestaña, el segundo enlace - la segunda pestaña, y así sucesivamente.
El algoritmo general se verá así: al hacer clic en el botón debemos encontrar el enlace con la clase y quitarle esta clase. De manera similar debemos encontrar la pestaña con esta clase y también quitarle esta clase.
Luego debemos tomar el enlace en el que se hizo clic y activarlo. Luego debemos tomar la pestaña que tiene el mismo número que nuestro enlace - y también activarla.
Copie los códigos HTML y CSS proporcionados. Implemente las pestañas según el algoritmo descrito.
