Saltar al contenido

Haga que la pestaña Bootstrap esté activa en las bases del enlace URL

Si encuentras alguna incompatibilidad en tu código o trabajo, recuerda probar siempre en un entorno de testing antes añadir el código al trabajo final.

Solución:

Puedes lograrlo usando jquery algo como esto. Su URL, por ejemplo, “www.myurl.com/page#tab1”;

var url = window.location.href;

Obtenga la pestaña para activar desde el enlace de URL.

 var activeTab = url.substring(url.indexOf("#") + 1);

Eliminar la antigua clase de pestaña activa

 $(".tab-pane").removeClass("active in");

Añadir clase activa a nueva pestaña

$("#" + activeTab).addClass("active in");

O abra la pestaña directamente después de obtener activeTab.

$('a[href="#'+ activeTab +'"]').tab('show')

  1. Obtenga el hash de la URL y muestre la pestaña activa
  2. Establecer el hash actual en la URL

Puedes usar este código:

$(function()
  var hash = window.location.hash;
  hash && $('ul.nav.nav-pills a[href="' + hash + '"]').tab('show'); 
  $('ul.nav.nav-pills a').click(function (e) 
     $(this).tab('show');
     var scrollmem = $('body').scrollTop();
     window.location.hash = this.hash;
  );
);

Si te gustó nuestro trabajo, puedes dejar un post acerca de qué le añadirías a este escrito.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *