jquery - content - Bootstrap 3: mantener la pestaña seleccionada en la página de actualización

bootstrap tab refresh content

Question

Estoy intentando mantener activa la pestaña seleccionada al actualizar con Bootstrap 3 . Intenté y verifiqué con algunas preguntas ya hechas aquí, pero nada de trabajo para mí. No sé dónde estoy equivocado. 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'');
}

Answer 1

Hay una solución después de volver a cargar la página y mantener la pestaña esperada como seleccionada.

Supongamos que después de guardar los datos, la URL redirigida es: my_url # tab_2

Ahora, a través de este script, su pestaña esperada permanecerá seleccionada.

$(document).ready(function(){
var url = document.location.toString();
if (url.match(''#'')) {
$(''.nav-tabs a[href="#'' + url.split(''#'')[1] + ''"]'').tab(''show'');
$(''.nav-tabs a'').removeClass(''active'');
}
});

Answer 2

Además de la respuesta de Xavi Martínez evitando el salto al hacer clic

Evitando saltar

$(document).ready(function(){
// show active tab
if(location.hash) {
$(''a[href='' + location.hash + '']'').tab(''show'');
}
// set hash on click without jumb
$(document.body).on("click", "a[data-toggle]", function(e) {
e.preventDefault();
if(history.pushState) {
history.pushState(null, null, this.getAttribute("href"));
}
else {
location.hash = this.getAttribute("href");
}
$(''a[href='' + location.hash + '']'').tab(''show'');
return false;
});
});
// set hash on popstate
$(window).on(''popstate'', function() {
var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
$(''a[href='' + anchor + '']'').tab(''show'');
});

Pestañas anidadas

implementación con el carácter "_" como separador

$(document).ready(function(){
// show active tab
if(location.hash) {
var tabs = location.hash.substring(1).split(''_'');
$.each(tabs,function(n){
$(''a[href=#'' + tabs[n] + '']'').tab(''show'');
});
$(''a[href='' + location.hash + '']'').tab(''show'');
}
// set hash on click without jumb
$(document.body).on("click", "a[data-toggle]", function(e) {
e.preventDefault();
if(history.pushState) {
history.pushState(null, null, this.getAttribute("href"));
}
else {
location.hash = this.getAttribute("href");
}
var tabs = location.hash.substring(1).split(''_'');
//console.log(tabs);
$.each(tabs,function(n){
$(''a[href=#'' + tabs[n] + '']'').tab(''show'');
});
$(''a[href='' + location.hash + '']'').tab(''show'');
return false;
});
});
// set hash on popstate
$(window).on(''popstate'', function() {
var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
var tabs = anchor.substring(1).split(''_'');
$.each(tabs,function(n){
$(''a[href=#'' + tabs[n] + '']'').tab(''show'');
});
$(''a[href='' + anchor + '']'').tab(''show'');
});

Answer 3

Ay, hay muchas maneras de hacer esto. Se me ocurrió esto, corto y simple. Espero que esto ayude a otros.

 var url = document.location.toString();
if (url.match(''#'')) {
$(''.nav-tabs a[href="#'' + url.split(''#'')[1] + ''"]'').tab(''show'');
}
$(''.nav-tabs a'').on(''shown.bs.tab'', function (e) {
window.location.hash = e.target.hash;
if(e.target.hash == "#activity"){
$(''.nano'').nanoScroller();
}
})

Answer 4

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

function rememberTabSelection(tabPaneSelector, useHash) {
var key = ''selectedTabFor'' + tabPaneSelector;
if(get(key))
$(tabPaneSelector).find(''a[href='' + get(key) + '']'').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 sigue el ritmo del botón Atrás, como es el caso de la solución de Xavi Martínez .

Answer 5

Bueno, esto ya está en 2018, pero creo que es mejor tarde que nunca (como un título en un programa de televisión), jajaja. Aquí abajo está el código jQuery que creo 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="'' + activeTab + ''"]'').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 ha mostrado una nueva pestaña utilizando 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 mediante el método .tab (''show'').

Buscando algunos ejemplos? aquí hay uno para ustedes, chicos. https://jsfiddle.net/Wineson123/brseabdr/

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

Answer 6

Como todavía no puedo comentar copié la respuesta de arriba, realmente me ayudó. Pero lo cambié para trabajar con cookies en lugar de #id, así que quería compartir las modificaciones. Esto permite almacenar la pestaña activa por más de una actualización (por ejemplo, redirección múltiple) o cuando la ID ya está en uso y no desea implementar el método de división de koppors.

<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>
<script>
$(''#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);
$.cookie(''activeTab'', id);
});
// on load of the page: switch to the currently selected tab
var hash = $.cookie(''activeTab'');
if (hash != null) {
$(''#myTab a[href="#'' + hash + ''"]'').tab(''show'');
}
</script>

Answer 7

El código de Xavi estaba completamente funcionando. Pero al navegar a otra página, al enviar un formulario, al ser redirigido a la página con mis pestañas no estaba cargando la pestaña guardada.

localStorage to the rescue (cambio leve del código de Nguyen):

$(''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="'' + selectedTab + ''"]'').tab(''show'');
}

Answer 8

Este es el mejor que probé:

$(document).ready(function() {
if (location.hash) {
$("a[href=''" + location.hash + "'']").tab("show");
}
$(document.body).on("click", "a[data-toggle]", 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");
});

Answer 9

Este utiliza HTML5 localStorage para almacenar 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="'' + activeTab + ''"]'').tab(''show'');
}

ref: 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

Answer 10

Gracias por compartir.

Al leer todas las soluciones. Se me ocurrió una solución que usa el url hash o localStorage dependiendo de la disponibilidad de este último con el siguiente código:

$(function(){
$(document).on(''shown.bs.tab'', ''a[data-toggle="tab"]'', function (e) {
localStorage.setItem(''activeTab'', $(e.target).attr(''href''));
})
var hash = window.location.hash;
var activeTab = localStorage.getItem(''activeTab'');
if(hash){
$(''#project-tabs a[href="'' + hash + ''"]'').tab(''show'');
}else if (activeTab){
$(''#project-tabs a[href="'' + activeTab + ''"]'').tab(''show'');
}
});

Answer 11

Intenté esto y funciona: (Por favor reemplace this con la pastilla o pestaña que está usando)

 jQuery(document).ready(function() {
jQuery(''a[data-toggle="pill"]'').on(''show.bs.tab'', function(e) {
localStorage.setItem(''activeTab'', jQuery(e.target).attr(''href''));
});
// Here, save the index to which the tab corresponds. You can see it
// in the chrome dev tool.
var activeTab = localStorage.getItem(''activeTab'');
// In the console you will be shown the tab where you made the last
// click and the save to "activeTab". I leave the console for you to
// see. And when you refresh the browser, the last one where you
// clicked will be active.
console.log(activeTab);
if (activeTab) {
jQuery(''a[href="'' + activeTab + ''"]'').tab(''show'');
}
});

Espero que ayude a alguien.

Aquí está el resultado: https://jsfiddle.net/neilbannet/ego1ncr5/5/

Answer 12

Mi código, funciona para mí, uso localStorage HTML5

$(''#tabHistory a'').click(function(e) {
e.preventDefault();
$(this).tab(''show'');
});
$("ul.nav-tabs#tabHistory > li > a").on("shown.bs.tab", function(e) {
var id = $(e.target).attr("href");
localStorage.setItem(''selectedTab'', id)
});
var selectedTab = localStorage.getItem(''selectedTab'');
$(''#tabHistory a[href="'' + selectedTab + ''"]'').tab(''show'');

Answer 13

Prefiero almacenar la pestaña seleccionada en el valor de hash de la ventana. Esto también permite enviar enlaces a colegas que ven la "misma página". El truco es cambiar el hash de la ubicación cuando se selecciona otra pestaña. Si ya usas # en tu 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 una parte <script>...</script> .

$(''#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="'' + hash + ''"]'').tab(''show'');

Answer 14

Probé el código ofrecido por Xavi Martínez . Funcionó, pero no para IE7. El problema es que las pestañas no hacen referencia a ningún contenido relevante.
Por lo tanto, prefiero este código para resolver ese problema.

function pageLoad() {
$(document).ready(function() {
var tabCookieName = "ui-tabs-1"; //cookie name
var location = $.cookie(tabCookieName); //take tab''s href
if (location) {
$(''#Tabs a[href="'' + location + ''"]'').tab(''show''); //activate tab
}
$(''#Tabs a'').click(function(e) {
e.preventDefault()
$(this).tab(''show'')
})
//when content is alredy shown - event activate
$(''#Tabs a'').on(''shown.bs.tab'', function(e) {
location = e.target.hash; // take current href
$.cookie(tabCookieName, location, {
path: ''/''
}); //write href in cookie
})
});
};

Answer 15

Una mezcla entre otras respuestas:

• Sin salto al hacer clic
• Guardar en hash de ubicación
• Ahorre en localStorage (p. Ej .: para enviar formularios)

• Solo copie y pegue;)

  if (location.hash) {
  $(''a[href=/''' + location.hash + ''/']'').tab(''show'');
  }
  var activeTab = localStorage.getItem(''activeTab'');
  if (activeTab) {
  $(''a[href="'' + activeTab + ''"]'').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'');
  });

Answer 16

Usamos el jquery trigger para cargarlo, tenemos un script que pulsa el botón para nosotros

$ (". class_name"). trigger (''click'');

Answer 17

Usando html5 cociné este:

En algún lugar de la página:

<h2 id="heading" data-activetab="@ViewBag.activetab">Some random text</h2>

El viewbag solo debe contener la identificación para la página / elemento, por ej .: "testing"

Creé un site.js y agregué el scrip en la página:

/// <reference path="../jquery-2.1.0.js" />
$(document).ready(
function() {
var setactive = $("#heading").data("activetab");
var a = $(''#'' + setactive).addClass("active");
}
)

Ahora todo lo que tienes que hacer es agregar tus id a tu barra de navegación. P.ej.:

<ul class="nav navbar-nav">
<li **id="testing" **>
@Html.ActionLink("Lalala", "MyAction", "MyController")
</li>
</ul>

Todos saludan el atributo de datos :)