Bootstrap 3: Mantenha a guia selecionada na atualização da página

Eu estou tentando manter ativa a guia selecionada na atualização com o Bootstrap 3 . Tentei e chequei com alguma pergunta já foi feita aqui, mas nenhum trabalho para mim. Não sei onde estou errado. Aqui está meu código

HTML

   
tab data here...
tab data here...
tab data here...
tab data here...

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'); } 

Eu prefiro armazenar a guia selecionada no valor de hash da janela. Isso também permite o envio de links para colegas que, em vez de ver a mesma página. O truque é alterar o hash do local quando outra guia é selecionada. Se você já usa # em sua página, possivelmente a hashtag deve ser dividida. No meu aplicativo, eu uso “:” como separador de valor hash.

  
home
profile
messages
settings

JavaScript, deve ser incorporado após o acima em uma 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="' + hash + '"]').tab('show'); 

Este é o melhor que eu tentei:

 $(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"); }); 

Uma mistura entre outras respostas:

  • Não pule no clique
  • Salvar no hash do local
  • Salvar em localStorage (por exemplo: para envio de formulário)
  • Basta copiar e colar;)

     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'); }); 

O código de Xavi estava em pleno funcionamento. Mas ao navegar para outra página, enviar um formulário e, em seguida, ser redirecionado para a página com minhas guias, não estava carregando a guia salva.

localStorage para o resgate (ligeiramente alterado o 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'); } 

Este usa o HTML5 localStorage para armazenar a guia ativa

 $('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

Baseando-me nas respostas fornecidas por Xavi Martínez e Koppor , encontrei uma solução que usa o hasl de URL ou localStorage dependendo da disponibilidade do ú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... }); 

Ele não acompanha o botão de volta, como é o caso da solução de Xavi Martínez .

Meu código, funciona para mim, eu 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'); 

Eu tentei isso e funciona: (Por favor, substitua isso com a pílula ou aba que você 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 ajude alguém.

Aqui está o resultado: https://jsfiddle.net/neilbannet/ego1ncr5/5/

Como não posso comentar ainda copiei a resposta acima, isso realmente me ajudou. Mas eu mudei para trabalhar com cookies em vez de #id, então eu queria compartilhar as alterações. Isso torna possível armazenar a guia ativa por mais tempo do que apenas uma atualização (por exemplo, redirecionamento múltiplo) ou quando o id já está sendo usado e você não quer implementar o método split do koppors.

  
home
profile
messages
settings

Eu tentei o código oferecido por Xavi Martínez . Funcionou, mas não para o IE7. O problema é que as guias não se referem a nenhum conteúdo relevante.
Então, eu prefiro este código para resolver esse 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 }) }); }; 

Obrigado por compartilhar.

Lendo todas as soluções. Eu vim com uma solução que usa o hasl de URL ou localStorage dependendo da disponibilidade do último com código abaixo:

 $(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'); } }); 

Bem, isso já é em 2018, mas acho que é melhor tarde do que nunca (como um título em um programa de TV), lol. Aqui embaixo está o código jQuery que eu crio durante minha tese.

  

e aqui está o código para as abas bootstrap:

 

Section A

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.

Section B

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.

Section C

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.

  Não se esqueça de ligar para o bootstrap e outras coisas fundamentais 

Aqui estão códigos rápidos para você:

    

Agora vamos para a explicação:

O código jQuery no exemplo acima simplesmente obtém o valor do atributo href do elemento quando uma nova guia é mostrada usando o método jQuery .attr () e o salva localmente no navegador do usuário por meio do object localStorage do HTML5. Posteriormente, quando o usuário atualizar a página, ele recuperará esses dados e ativará a guia relacionada por meio do método .tab (‘show’).

Procurando por alguns exemplos? aqui é um para vocês .. https://jsfiddle.net/Wineson123/brseabdr/

Eu queria que minha resposta pudesse ajudar todos vocês .. Cheerio! 🙂

Usando html5 eu preparei esse aqui:

Alguns onde na página:

 

Some random text

A viewbag deve conter apenas o id da página / elemento, por exemplo: “testing”

Eu criei um site.js e adicionei o script na página:

 ///  $(document).ready( function() { var setactive = $("#heading").data("activetab"); var a = $('#' + setactive).addClass("active"); } ) 

Agora tudo o que você precisa fazer é adicionar seus id’s à sua barra de navegação. Por exemplo.:

  

Todos saudam o atributo de dados 🙂

Além da resposta de Xavi Martínez evitando o salto no clique

Evitando Jump

 $(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'); }); 

Guias aninhadas

implementação com caractere “_” 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'); }); 

Usamos jquery trigger para onload ter um script aperte o botão para nós

$ (“. class_name”). trigger (‘clique’);

Há uma solução depois de recarregar a página e manter a guia esperada como selecionada.

Suponha que, após salvar os dados, o URL redirecionado seja: my_url # tab_2

Agora, através deste script, sua guia esperada permanecerá selecionada.

 $(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'); } }); 

Ai, há muitas maneiras de fazer isso. Eu cheguei com isso, curto e simples. Espero que isso ajude os outros.

  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(); } })