Al revisar los fundamentos de JavaScript, es crucial cimentar el conocimiento, valorando cada detalle. Este artículo explora dos maneras de implementar la funcionalidad de pestañas (tabs) utilizando JavaScript puro: un enfoque procedural y otro orientado a objetos.
El estilo procedurla se asemeja a escribir un relato lineal, sin introducciones elaboradas, simplemente narranod los eventos en secuencia. En contraste, el enfoque orientado a objetos promueve la reutilización de código, encapsulación y herencia, resultando en una estructura más organizada y mantenible, especialmente para aplicaciones complejas.
Demostración Visual de Pestañas
A continuación, se presenta el resultado visual que se busca lograr con la funcionalidad de pestañas:
1. Implementación Procedural para Cambio de Pestañas
Este método sigue una lógica secuencial para gestionar la activación y desactivación de pestañas.
<html>
<head>
<title>Pestañas Procedurales</title>
<style type="text/css">
.tab-button {
background-color: white;
border: 1px solid #ccc;
padding: 5px 10px;
margin-right: 5px;
cursor: pointer;
}
.tab-button.active {
background-color: yellow;
font-weight: bold;
}
.tab-content {
width: 200px;
height: 150px;
background-color: #e0e0e0;
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
display: none;
}
.tab-content.visible {
display: block;
}
</style>
</head>
<body>
<div id="tabContainer1">
<input type="button" class="tab-button active" value="Pestaña 1"/>
<input type="button" class="tab-button" value="Pestaña 2"/>
<input type="button" class="tab-button" value="Pestaña 3"/>
<div class="tab-content visible">Contenido de la Pestaña 1</div>
<div class="tab-content">Contenido de la Pestaña 2</div>
<div class="tab-content">Contenido de la Pestaña 3</div>
</div>
<script type="text/javascript">
window.onload = function() {
var container = document.getElementById('tabContainer1');
var buttons = container.getElementsByClassName('tab-button');
var contentDivs = container.getElementsByClassName('tab-content');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
// Ocultar todos los contenidos y desmarcar todos los botones
for (var j = 0; j < buttons.length; j++) {
buttons[j].classList.remove('active');
contentDivs[j].classList.remove('visible');
}
// Marcar el botón actual y mostrar su contenido
this.classList.add('active');
contentDivs[this.getAttribute('data-index')].classList.add('visible');
});
// Asignar un índice a cada botón para referenciar el contenido
buttons[i].setAttribute('data-index', i);
}
// Inicializar la primera pestaña visible
buttons[0].click();
};
</script>
</body>
</html>
- Implementación Orientada a Objetos para Cambio de Pestañas
Este enfoque utiliza una clase para encapsular la lógica de las pestañas, facilitando su reutilización en diferentes partes de una aplicación.
<html>
<head>
<title>Pestañas Orientadas a Objetos</title>
<style type="text/css">
.tab-button {
background-color: white;
border: 1px solid #ccc;
padding: 5px 10px;
margin-right: 5px;
cursor: pointer;
}
.tab-button.active {
background-color: yellow;
font-weight: bold;
}
.tab-content {
width: 200px;
height: 150px;
background-color: #e0e0e0;
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
display: none;
}
.tab-content.visible {
display: block;
}
</style>
</head>
<body>
<div id="tabSection1">
<input type="button" class="tab-button active" value="Sección 1"/>
<input type="button" class="tab-button" value="Sección 2"/>
<input type="button" class="tab-button" value="Sección 3"/>
<div class="tab-content visible">Detalles de la Sección 1</div>
<div class="tab-content">Detalles de la Sección 2</div>
<div class="tab-content">Detalles de la Sección 3</div>
</div>
<div id="tabSection2">
<input type="button" class="tab-button active" value="Tab A"/>
<input type="button" class="tab-button" value="Tab B"/>
<div class="tab-content visible">Contenido A</div>
<div class="tab-content">Contenido B</div>
</div>
<script type="text/javascript">
function TabManager(containerId) {
var container = document.getElementById(containerId);
this.buttons = container.getElementsByClassName('tab-button');
this.contentDivs = container.getElementsByClassName('tab-content');
var self = this; // Para mantener el contexto 'this' dentro del bucle
for (var i = 0; i < this.buttons.length; i++) {
this.buttons[i].setAttribute('data-index', i);
this.buttons[i].addEventListener('click', function() {
self.activateTab(this);
});
}
}
TabManager.prototype.activateTab = function(clickedButton) {
for (var i = 0; i < this.buttons.length; i++) {
this.buttons[i].classList.remove('active');
this.contentDivs[i].classList.remove('visible');
}
clickedButton.classList.add('active');
var index = parseInt(clickedButton.getAttribute('data-index'), 10);
this.contentDivs[index].classList.add('visible');
};
window.onload = function() {
var tabControl1 = new TabManager('tabSection1');
var tabControl2 = new TabManager('tabSection2');
};
</script>
</body>
</html>
La ventaja principle del enfoque orientado a objetos es la capacidad de instanciar el gestor de pestañas múltiples veces, cada una operando independientemente sobre su contenedor asignado. Esto simplifica enormemente la adición de funcionalidades de pestañas en distintas áreas de una página web.