Las pestañas se utilizan para navegar y mostrar diferentes contenidos en el sitio web. Usamos pestañas para administrar el espacio y hacer que el sitio web sea más atractivo.
Acercarse:
- En la etiqueta del cuerpo , cree algunas pestañas debajo de la etiqueta div con un atributo de datos personalizado que contenga la identificación del contenido.
- Cree otra etiqueta div para almacenar el contenido de la pestaña con una identificación específica.
- Especifique atributos de datos para cada etiqueta de contenido para mostrar solo el contenido de una pestaña a la vez.
- Usando JavaScript podemos mostrar el contenido de la etiqueta usando su id.
En este artículo, hemos creado tres pestañas Tab-1, Tab-2 y Tab-3. Cuando hacemos clic en cualquier pestaña específica, se mostrará el contenido de esa pestaña.
Nota: Para CSS , consulte el código debajo de la etiqueta de estilo y para JavaScript, consulte el código debajo de la etiqueta de secuencia de comandos.
Ejemplo: en este ejemplo, crearemos pestañas que contengan contenido diferente.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background: rgb(140, 214, 30);
}
[data-tab-info] {
display: none;
}
.active[data-tab-info] {
display: block;
}
.tab-content {
font-size: 30px;
font-family: sans-serif;
font-weight: bold;
color: rgb(82, 75, 75);
}
.tabs {
font-size: 40px;
color: rgb(255, 255, 255);
display: flex;
margin: 0;
}
.tabs span {
background: rgb(28, 145, 38);
padding: 10px;
border: 1px solid rgb(255, 255, 255);
}
.tabs span:hover {
background: rgb(29, 185, 112);
cursor: pointer;
color: black;
}
</style>
</head>
<body>
<div class="tabs">
<span data-tab-value="#tab_1">Tab-1</span>
<span data-tab-value="#tab_2">Tab-2</span>
<span data-tab-value="#tab_3">Tab-3</span>
</div>
<div class="tab-content">
<div class="tabs__tab active" id="tab_1" data-tab-info>
<p>Welcome to GeeksforGeek.</p>
</div>
<div class="tabs__tab" id="tab_2" data-tab-info>
<p>Hello Everyone.</p>
</div>
<div class="tabs__tab" id="tab_3" data-tab-info>
<p>Learn cool stuff.</p>
</div>
</div>
<script type="text/javascript">
const tabs = document.querySelectorAll('[data-tab-value]')
const tabInfos = document.querySelectorAll('[data-tab-info]')
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = document
.querySelector(tab.dataset.tabValue);
tabInfos.forEach(tabInfo => {
tabInfo.classList.remove('active')
})
target.classList.add('active');
})
})
</script>
</body>
</html>
Salida: cuando hacemos clic en Tab-1, muestra el contenido de Tab-1 igual que Tab-2 y Tab-3.
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA