Para mantener activa la pestaña en la que estabas después de realizar una acción que recargue la página (como agregar un interviniente), puedes almacenar el identificador de la pestaña seleccionada en el almacenamiento local del navegador y recuperarlo después de la recarga. Aquí te explico cómo lograrlo.
1. Guardar la Pestaña Activa en LocalStorage
Agrega un evento de JavaScript para almacenar el id de la pestaña activa cuando el usuario cambia de pestaña. Usa el localStorage del navegador para guardar este valor.
Para conservar la pestaña activa después de que la página se recargue, puedes almacenar el ID de la pestaña activa en localStorage. Luego, al cargar la página, verifica si existe este valor y establece la pestaña activa en consecuencia. A continuación, te muestro cómo podrías implementar esto en JavaScript:
- Guarda el ID de la pestaña activa en
localStorage cuando se haga clic en una pestaña. - Recupera el ID almacenado cuando la página se cargue y activa esa pestaña.
Aquí está el código JavaScript que puedes agregar a tu proyecto:
<script>
// Al cargar la página, verifica si hay una pestaña activa guardada en localStorage
document.addEventListener("DOMContentLoaded", function() {
const activeTab = localStorage.getItem("activeTab");
if (activeTab) {
const tabElement = document.getElementById(activeTab);
if (tabElement) {
new bootstrap.Tab(tabElement).show();
}
}
// Añade el evento 'click' para guardar el ID de la pestaña activa en localStorage
const tabButtons = document.querySelectorAll('#myTab button[data-bs-toggle="tab"]');
tabButtons.forEach(button => {
button.addEventListener("click", function(event) {
const activeTabId = event.target.id;
localStorage.setItem("activeTab", activeTabId);
});
});
});
</script>
Este código funciona de la siguiente manera:
- Al cargar la página: verifica si existe una pestaña activa en
localStorage. Si existe, la activa utilizando bootstrap.Tab. - Al hacer clic en una pestaña: guarda el ID de la pestaña activa en
localStorage para que persista después de la recarga de la página.
Con este código, la pestaña en la que estés trabajando permanecerá activa después de guardar los datos del formulario y recargar la página.
Guardar la pestaña activa en localStorage
<div class="container" style="background-color: white;">
<ul class="nav nav-tabs" id="myTab-carpeta" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="carpeta-tab" data-bs-toggle="tab" data-bs-target="#carpeta" type="button" role="tab" aria-controls="carpeta" aria-selected="true">Inicial</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="fechaHecho-tab" data-bs-toggle="tab" data-bs-target="#fechaHecho" type="button" role="tab" aria-controls="fechaHecho" aria-selected="false">Intervinientes</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="Emproceso-tab" data-bs-toggle="tab" data-bs-target="#Emproceso" type="button" role="tab" aria-controls="Emproceso" aria-selected="false">Delitos</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="intermedia-tab" data-bs-toggle="tab" data-bs-target="#intermedia" type="button" role="tab" aria-controls="intermedia" aria-selected="false">Intermedia</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="Emprocesos-tab" data-bs-toggle="tab" data-bs-target="#Emprocesos" type="button" role="tab" aria-controls="Emprocesos" aria-selected="false">Juicio</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="Solicitudes-tab" data-bs-toggle="tab" data-bs-target="#Solicitudes" type="button" role="tab" aria-controls="Solicitudes" aria-selected="false">Solicitudes</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="audiencia-exp-tab" data-bs-toggle="tab" data-bs-target="#audiencia-exp" type="button" role="tab" aria-controls="audiencia-exp" aria-selected="false">Audiencias</button>
</li>
</ul>
<div class="tab-content mt-2" id="myTabContent" >
<div class="tab-pane fade show active" id="carpeta" role="tabpanel" aria-labelledby="carpeta-tab"><?php require_once "fechaHechor.php"; ?></div>
<div class="tab-pane fade" id="intermedia" role="tabpanel" aria-labelledby="intermedia-tab"><?php require_once "carpeta-intermedia.php"; ?></div>
<div class="tab-pane fade" id="Solicitudes" role="tabpanel" aria-labelledby="Solicitudes-tab"><?php require_once "solicitudes-carpeta-create.php"; ?></div>
<div class="tab-pane fade" id="fechaHecho" role="tabpanel" aria-labelledby="fechaHecho-tab"><?php require_once "cat-intervinientes.php"; ?></div>
<div class="tab-pane fade" id="Emproceso" role="tabpanel" aria-labelledby="Emproceso-tab"><?php require_once "carpeta.php"; ?></div>
<div class="tab-pane fade" id="Emprocesos" role="tabpanel" aria-labelledby="Emprocesos-tab"><?php //require_once "fechaHechorr.php--carpeta.php"; ?></div>
<div class="tab-pane fade" id="audiencia-exp" role="tabpanel" aria-labelledby="audiencia-exp-tab"><?php //require_once "audiencia-exp.php"; ?></div>
</div>
</div>
<script>
// Al cargar el documento
document.addEventListener("DOMContentLoaded", function () {
// Obtener el tab activo del localStorage
var activeTab = localStorage.getItem("activeTab");
// Si hay un tab activo guardado, activarlo
if (activeTab) {
var tabButton = document.getElementById(activeTab);
var tabPane = document.getElementById(activeTab.replace("-tab", ""));
if (tabButton && tabPane) {
// Cambia la clase a active para el botón y la pestaña correspondiente
tabButton.classList.add("active");
tabPane.classList.add("show", "active");
// Remueve la clase active de las demás pestañas
var otherButtons = document.querySelectorAll('.nav-link');
otherButtons.forEach(function (button) {
if (button !== tabButton) {
button.classList.remove("active");
}
});
var otherPanes = document.querySelectorAll('.tab-pane');
otherPanes.forEach(function (pane) {
if (pane !== tabPane) {
pane.classList.remove("show", "active");
}
});
}
}
// Guardar el tab activo al hacer clic en un botón
var tabButtons = document.querySelectorAll('.nav-link');
tabButtons.forEach(function (button) {
button.addEventListener('click', function () {
localStorage.setItem("activeTab", this.id); // Guarda el ID del botón activo
});
});
});
</script>
OTRA OPCION QUE FUNCIONA:::::::
<script>
document.addEventListener('DOMContentLoaded', function() {
const tabContainerId = 'myTab-carpeta';
const activeTab = localStorage.getItem(tabContainerId + '-active-tab');
if (activeTab) {
const activeTabButton = document.querySelector(`#${tabContainerId} button[data-bs-target="${activeTab}"]`);
const activeTabContent = document.querySelector(activeTab);
if (activeTabButton && activeTabContent) {
const tab = new bootstrap.Tab(activeTabButton);
tab.show();
}
}
const tabLinks = document.querySelectorAll(`#${tabContainerId} .nav-link`);
tabLinks.forEach(tabLink => {
tabLink.addEventListener('click', function() {
const targetTab = this.getAttribute('data-bs-target');
localStorage.setItem(tabContainerId + '-active-tab', targetTab);
});
});
});
</script>
Comentarios
Publicar un comentario