es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo mantengo la pestaña activa después de actualizar la página con localStorage?

01 Jun, 2023 Programación

// mostrar la sección activa
$(‘div>a’).click(function() {
console.log($(this).attr(‘id’))
$(‘.main.container>section’).removeClass(‘active’)
$(‘.main.container>section.’ + $(this).attr(‘id’)).addClass(‘active’)
localStorage.setItem(‘activeTab’, $(this).attr(‘id’));
})

// obtener la pestaña activa desde el almacenamiento local
var activeTab = localStorage.getItem(‘activeTab’);
if (activeTab) {
$(‘#’ + activeTab).click();
}else{
$(‘div:first-child a’).click();
}

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para que este código funcione con localstorage, necesita agregar algunas líneas de código:

    // mostrar la sección activa
$('div>a').click(function() {
  console.log($(this).attr('id'))
  $('.main.container>section').removeClass('active')
  $('.main.container>section.' + $(this).attr('id')).addClass('active')

  // Guardar la pestaña activa en localstorage
  localStorage.setItem('activeTab', $(this).attr('id'));
})

// Recuperar la pestaña activa de localstorage al cargar la página
var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
  $('.main.container>section').removeClass('active')
  $('.main.container>section.' + activeTab).addClass('active')
}

    El primer bloque de código guarda el ID de la pestaña activa en localstorage cada vez que se hace clic en una pestaña. Y el segundo bloque de código recupera el ID de la pestaña activa de localstorage al cargar la página y establece la pestaña correspondiente como activa.

    Asegúrese de probar este código a fondo, ya que localstorage puede comportarse de manera diferente en diferentes navegadores y dispositivos.

Comments are closed.