¿Cómo puedo mantener la pestaña Bootstrap seleccionada en la actualización de la página?

4 minutos de lectura

avatar de usuario
Amante del código

estoy tratando de mantener activa la pestaña seleccionada al actualizar con Arranque 3. Intenté y verifiqué con algunas preguntas que ya se hicieron aquí, pero ninguna me funcionó. No se donde me equivoque. Aquí está mi código

HTML

<!-- tabs link -->
<ul class="nav nav-tabs" id="rowTab">
    <li class="active"><a href="#personal-info" data-toggle="tab">Personal Information</a></li>
    <li><a href="#Employment-info" data-toggle="tab">Employment Information</a></li>
    <li><a href="#career-path" data-toggle="tab">Career Path</a></li>
    <li><a href="#warnings" data-toggle="tab">Warning</a></li>
</ul>
<!-- end: tabs link -->

<div class="tab-content">
    <div class="tab-pane active" id="personal-info">
        tab data here...
    </div>

    <div class="tab-pane" id="Employment-info">
        tab data here...
    </div>

    <div class="tab-pane" id="career-path">
        tab data here...
    </div>

    <div class="tab-pane" id="warnings">
        tab data here...
    </div>
</div>

JavaScript:

// tab
$('#rowTab a:first').tab('show');

//for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//save the latest tab; use cookies if you like 'em better:
localStorage.setItem('selectedTab', $(e.target).attr('id'));
});

//go to the latest tab, if it exists:
var selectedTab = localStorage.getItem('selectedTab');
if (selectedTab) {
  $('#'+selectedTab).tab('show');
}

  • La razón por la que no funciona es porque no está almacenando la pestaña seleccionada. cuando lo hice console.log("selectedTab::"+selectedTab);Obtuve : selectedTab::undefined . Entonces la lógica que aplicaste no es correcta

    – El caballero oscuro

    25 de septiembre de 2013 a las 8:14

  • Entonces, ¿puedes guiarme qué hacer?

    – Amante del código

    25 de septiembre de 2013 a las 8:20

  • Creo que esto funcionará: jsbin.com/UNuYoHE/2/editar . Si me avisa, publicaré la respuesta de manera nítida. También es posible que desee ver los textos de la pestaña div. no dan la respuesta adecuada cuando hace clic en ellos. Por ejemplo, si hace clic en tab4, obtiene el texto tab1.

    – El caballero oscuro

    25 de septiembre de 2013 a las 8:38


  • Por cierto, utilicé esta respuesta para la codificación JS: stackoverflow.com/questions/9529723/…

    – El caballero oscuro

    25 de septiembre de 2013 a las 8:41

  • Gracias, no funciona y vuelve a la primera pestaña. Sí, he arbitrado esa respuesta… pero no funcionó… 🙁

    – Amante del código

    25 de septiembre de 2013 a las 8:50

avatar de usuario
koppor

Prefiero almacenar la pestaña seleccionada en el valor hash de la ventana. Esto también permite enviar enlaces a colegas, quienes ven “la misma” página. El truco consiste en cambiar el hash de la ubicación cuando se selecciona otra pestaña. Si ya usa # en su página, posiblemente la etiqueta hash deba dividirse. En mi aplicación, uso “:” como separador de valores hash.

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">home</div>
  <div class="tab-pane" id="profile">profile</div>
  <div class="tab-pane" id="messages">messages</div>
  <div class="tab-pane" id="settings">settings</div>
</div>

JavaScript, tiene que estar incrustado después de lo anterior en un <script>...</script> parte.

$('#myTab a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
  var id = $(e.target).attr("href").substr(1);
  window.location.hash = id;
});

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="'%20+%20hash%20+%20'"]').tab('show');

  • En la sección del guión, debe agregar un punto y coma al final de e.preventDefault(); y $(this).tab('show');

    – Sean Adams-Hiett

    29 de enero de 2014 a las 0:28

  • Desafortunadamente, el navegador salta al contenido de la pestaña cuando hace clic en él. Este es el comportamiento predeterminado cuando establece el valor window.location.hash. Una alternativa podría ser usar push.state pero necesita un polyfill para IE<=9. Para obtener más información y otras soluciones alternativas, consulte stackoverflow.com/questions/3870057/…

    – Philipp Michael

    7 julio 2015 a las 8:21


  • ¿Hay alguna forma de evitar el “desplazamiento falso” a la identificación en cuestión cuando hacemos clic en el elemento?

    – Patrice Poliquín

    12 de diciembre de 2016 a las 19:59

  • El desplazamiento se debe a la identificación asignada a las páginas de pestañas. Si usa identificaciones semánticas y modifica el hash (es decir, agrega un prefijo/sufijo), no se reconocerá como una identificación válida y no se producirá ningún desplazamiento. Ampliará la respuesta con esto.

    – Álex Mazzariol

    13 de julio de 2017 a las 13:33

  • @koppor funciona, pero cuando salto directamente a la otra pestaña guardada (a través de un enlace), muestra la pestaña de inicio o la primera pestaña rápidamente alrededor de 1 segundo antes de que salte a la pestaña en el enlace. Alguna idea para evitar que muestre la primera pestaña ya que no es necesario?

    – chico

    12 de marzo de 2019 a las 6:19

avatar de usuario
Xavi Martinez

Este es el mejor que he probado:

$(document).ready(function() {
    if (location.hash) {
        $("a[href=""https://stackoverflow.com/questions/18999501/+ location.hash +""]").tab("show");
    }
    $(document.body).on("click", "a[data-toggle="tab"]", function(event) {
        location.hash = this.getAttribute("href");
    });
});
$(window).on("popstate", function() {
    var anchor = location.hash || $("a[data-toggle="tab"]").first().attr("href");
    $("a[href="" + anchor + ""]").tab("show");
});

  • se mantendrá actualizado cuando haga clic en un cuadro de selección o cuadro de texto

    – Camiseta Rei

    29 de septiembre de 2015 a las 7:40

  • Creo que cambiar el selector a "a[data-toggle=tab]" seria mejor. La forma en que se escribe el selector ahora también cambia la URL del navegador al hacer clic en un enlace para, por ejemplo, abrir un modal.

    – leifdenby

    25/10/2015 a las 21:53


  • Buena solución, pero la página sigue parpadeando al cambiar de pestaña, que no es lo que necesito. Las pestañas se completan con AJAX, ¿tal vez eso podría ser un problema?

    – jesús

    2 de diciembre de 2015 a las 7:51

  • Es posible que desee agregar un corchete de cadena en el selector, como ‘a[href=”‘%20+%20location.hash%20+%20′”]’ . Tropecé con un error de sintaxis.

    – asdacap

    2 de febrero de 2016 a las 10:16

  • El uso de este estado en conflicto con los menús desplegables de Bootstrap (que usan data-toggle="dropdown" y que tengo en la misma página con pestañas en un caso. Como alguien sugirió aquí, simplemente reemplazando $(document.body).on("click", "a[data-toggle]", function(event) { con $(document.body).on("click", "a[data-toggle='tab']", function(event) { hizo el truco para mí.

    – Jiveman

    12 de junio de 2018 a las 5:58


Una mezcla entre otras respuestas:

  • Sin salto al hacer clic
  • Guardar en hash de ubicación
  • Ahorre en almacenamiento local (p. ej., para enviar formularios)
  • Solo copia y pega 😉

    if (location.hash) {
      $('a[href=\'"https://stackoverflow.com/questions/18999501/+ location.hash +"\']').tab('show');
    }
    var activeTab = localStorage.getItem('activeTab');
    if (activeTab) {
      $('a[href="'%20+%20activeTab%20+%20'"]').tab('show');
    }
    
    $('body').on('click', 'a[data-toggle=\'tab\']', function (e) {
      e.preventDefault()
      var tab_name = this.getAttribute('href')
      if (history.pushState) {
        history.pushState(null, null, tab_name)
      }
      else {
        location.hash = tab_name
      }
      localStorage.setItem('activeTab', tab_name)
    
      $(this).tab('show');
      return false;
    });
    $(window).on('popstate', function () {
      var anchor = location.hash ||
        $('a[data-toggle=\'tab\']').first().attr('href');
      $('a[href=\'' + anchor + '\']').tab('show');
    });
    

  • La mejor solución que he probado de muchas diferentes. El salto al contenido de la pestaña fue molesto

    – Kentor

    14/06/2017 a las 19:36


  • El salto de contenido sigue ahí con esta respuesta

    – Shahbaz A.

    31 de agosto de 2017 a las 7:50

  • Encontré una advertencia para esto: la pestaña almacenada en el almacenamiento local anulará una en el hash de ubicación, lo que dificulta seguir los enlaces si la página ya ha sido visitada. He actualizado así: var activeTab = localStorage.getItem('activeTab'); if (location.hash) { $('a[href=\''%20+%20location.hash%20+%20'\']').tab('show'); } else if (activeTab) { $('a[href="'%20+%20activeTab%20+%20'"]').tab('show'); }

    – Gary Stanton

    15 de septiembre de 2017 a las 11:46


  • Me pregunto por qué esto no funciona para mí. ¿Debería reemplazar algo en este código y no simplemente copiar y pegar literalmente? 🙂

    – chico

    12 de marzo de 2019 a las 6:54

  • Para que esto funcione, debe colocar este script DESPUÉS de sus tabulaciones, O bien, ajustar la primera cláusula (dos ifs + var dec) en $(document).ready(function() { porque sus pestañas aún no existen e intenta cerrar la pestaña activa antes de que se carguen

    – Jonathan

    23 mayo 2019 a las 22:54


El código de Xavi funcionaba casi por completo. Pero al navegar a otra página, enviar un formulario y luego ser redirigido a la página con mis pestañas no cargaba la pestaña guardada en absoluto.

localStorage al rescate (código de Nguyen ligeramente modificado):

$('a[data-toggle="tab"]').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

$('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
    var id = $(e.target).attr("href");
    localStorage.setItem('selectedTab', id)
});

var selectedTab = localStorage.getItem('selectedTab');
if (selectedTab != null) {
    $('a[data-toggle="tab"][href="'%20+%20selectedTab%20+%20'"]').tab('show');
}

avatar de usuario
Ajith R Nair

Este usa HTML5 localStorage para guardar la pestaña activa

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
   $('#navtab-container a[href="'%20+%20activeTab%20+%20'"]').tab('show');
}

árbitro: http://www.tutorialrepublic.com/faq/how-to-keep-the-current-tab-active-on-page-reload-in-bootstrap.php
https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp

  • esto es bueno, pero una desventaja es que no podrías compartir enlaces con la pestaña activa

    – lfender6445

    13/04/2016 a las 18:30

  • esto es bueno, la ventaja es que no presenta un problema en el que “window.location.hash” agrega un valor hash al parámetro de solicitud http en la URL que causa colisión y una mala lectura de parámetros por parte de otra solicitud http, como la paginación, etc.

    – Estiércol

    27/04/2016 a las 22:01

Bueno, esto ya es 2018 pero creo que más vale tarde que nunca (como un título en un programa de TV), jejeje. Aquí abajo está el código jQuery que creé durante mi tesis.

<script type="text/javascript">
$(document).ready(function(){
    $('a[data-toggle="tab"]').on('show.affectedDiv.tab', function(e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    });
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
        $('#myTab a[href="'%20+%20activeTab%20+%20'"]').tab('show');
    }
});
</script>

y aquí está el código para las pestañas de arranque:

<div class="affectedDiv">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>
        <li><a data-toggle="tab" href="#sectionB">Section B</a></li>
        <li><a data-toggle="tab" href="#sectionC">Section C</a></li>
    </ul>
    <div class="tab-content">
        <div id="sectionA" class="tab-pane fade in active">
            <h3>Section A</h3>
            <p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
        </div>
        <div id="sectionB" class="tab-pane fade">
            <h3>Section B</h3>
            <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
        </div>
        <div id="sectionC" class="tab-pane fade">
            <h3>Section C</h3>
            <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
        </div>
    </div>
</div>

Dont forget to call the bootstrap and other fundamental things 

aquí hay códigos rápidos para usted:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Ahora vamos a la explicación:

El código jQuery en el ejemplo anterior simplemente obtiene el valor del atributo href del elemento cuando se muestra una nueva pestaña usando el método jQuery .attr() y lo guarda localmente en el navegador del usuario a través del objeto HTML5 localStorage. Más tarde, cuando el usuario actualiza la página, recupera estos datos y activa la pestaña relacionada a través del método .tab(‘show’).

¿Estás buscando algunos ejemplos? aquí hay uno para ustedes..
https://jsfiddle.net/Wineson123/brseabdr/

Desearía que mi respuesta pudiera ayudarlos a todos. ¡Cheerio! 🙂

  • esto es bueno, pero una desventaja es que no podrías compartir enlaces con la pestaña activa

    – lfender6445

    13/04/2016 a las 18:30

  • esto es bueno, la ventaja es que no presenta un problema en el que “window.location.hash” agrega un valor hash al parámetro de solicitud http en la URL que causa colisión y una mala lectura de parámetros por parte de otra solicitud http, como la paginación, etc.

    – Estiércol

    27/04/2016 a las 22:01

Basándome en las respuestas proporcionadas por Xavi Martínez y koppor se me ocurrió una solución que utiliza el hash de url o localStorage dependiendo de la disponibilidad de este último:

function rememberTabSelection(tabPaneSelector, useHash) {
    var key = 'selectedTabFor' + tabPaneSelector;
    if(get(key)) 
        $(tabPaneSelector).find('a[href="https://stackoverflow.com/questions/18999501/+%20get(key)%20+"]').tab('show');

    $(tabPaneSelector).on("click", 'a[data-toggle]', function(event) {
        set(key, this.getAttribute('href'));
    }); 

    function get(key) {
        return useHash ? location.hash: localStorage.getItem(key);
    }

    function set(key, value){
        if(useHash)
            location.hash = value;
        else
            localStorage.setItem(key, value);
    }
}

Uso:

$(document).ready(function () {
    rememberTabSelection('#rowTab', !localStorage);
    // Do Work...
});

No le sigue el ritmo al botón de atrás como es el caso de la solución de Xavi Martínez.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad