Bootstrap 3: mantiene la scheda selezionata all’aggiornamento della pagina

Sto cercando di mantenere triggers la scheda selezionata durante l’aggiornamento con Bootstrap 3 . Ho provato e controllato con qualche domanda già posta qui, ma nessuno di lavoro per me. Non so dove mi sbaglio. Ecco il mio codice

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

Preferisco memorizzare la scheda selezionata nel hashvalue della finestra. Ciò consente anche l’invio di link ai colleghi, che invece vedono la “stessa pagina”. Il trucco è cambiare l’hash della posizione quando viene selezionata un’altra scheda. Se già usi # nella tua pagina, probabilmente il tag hash deve essere diviso. Nella mia app, utilizzo “:” come separatore di valori hash.

  
home
profile
messages
settings

JavaScript, deve essere incorporato dopo quanto sopra in una 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'); 

Questo è il migliore che ho provato:

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

Un mix tra gli altri risponde:

  • Nessun salto al clic
  • Salva sulla posizione hash
  • Salva su localStorage (es .: per il modulo di invio)
  • Basta copiare e incollare;)

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

Il codice di Xavi era completamente funzionante. Ma durante la navigazione verso un’altra pagina, l’invio di un modulo, quindi il reindirizzamento alla pagina con le mie tabs non stava caricando affatto la scheda salvata.

localStorage in the rescue (leggermente modificato il codice di 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'); } 

Questo usa HTML5 localStorage per memorizzare la scheda triggers

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

Basandomi sulle risposte fornite da Xavi Martínez e Koppor, ho trovato una soluzione che utilizza l’hash dell’URL o localStorage a seconda della disponibilità di quest’ultimo:

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

Non tiene il passo indietro come nel caso della soluzione di Xavi Martínez .

Il mio codice, funziona per me, io 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'); 

Ho provato questo e funziona: (Si prega di sostituire questo con la pillola o la scheda che si sta utilizzando)

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

Spero che possa aiutare qualcuno.

Ecco il risultato: https://jsfiddle.net/neilbannet/ego1ncr5/5/

Dal momento che non posso commentare ancora ho copiato la risposta dall’alto, mi ha davvero aiutato. Ma l’ho modificato per funzionare con i cookie anziché con #id, quindi volevo condividere le modifiche. Ciò consente di archiviare la scheda triggers più a lungo di un solo aggiornamento (ad esempio il reindirizzamento multiplo) o quando l’ID è già utilizzato e non si desidera implementare il metodo di suddivisione di Koppors.

  
home
profile
messages
settings

Ho provato il codice offerto da Xavi Martínez . Ha funzionato, ma non per IE7. Il problema è: le tabs non si riferiscono a nessun contenuto pertinente.
Quindi, preferisco questo codice per risolvere questo 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 }) }); }; 

Grazie per la condivisione.

Leggendo tutte le soluzioni. Ho trovato una soluzione che utilizza l’hash dell’URL o localStorage a seconda della disponibilità di quest’ultimo con il seguente codice:

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

Bene, questo è già nel 2018, ma penso che sia meglio tardi che mai (come un titolo in un programma televisivo), lol. Qui sotto c’è il codice jQuery che creo durante la mia tesi.

  

e qui è il codice per le tabs di 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.

  Non dimenticare di chiamare il bootstrap e altre cose fondamentali 

ecco i codici rapidi per te:

    

Ora veniamo alla spiegazione:

Il codice jQuery nell’esempio precedente ottiene semplicemente il valore dell’attributo href dell’elemento quando una nuova scheda è stata mostrata usando il metodo jQuery .attr () e la salva localmente nel browser dell’utente tramite l’object localStorage HTML5. Successivamente, quando l’utente aggiorna la pagina, recupera questi dati e triggers la relativa scheda tramite il metodo .tab (‘show’).

Cerchi alcuni esempi? eccone uno per voi ragazzi … https://jsfiddle.net/Wineson123/brseabdr/

Vorrei che la mia risposta potesse aiutarti tutti .. Cheerio! 🙂

Usando html5 ho preparato questo:

Alcuni in cui nella pagina:

 

Some random text

Il viewbag dovrebbe contenere solo l’id per la pagina / elemento es .: “testing”

Ho creato un site.js e aggiunto lo script nella pagina:

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

Ora tutto ciò che devi fare è aggiungere i tuoi id alla tua barra di navigazione. Per esempio.:

  

Tutti salgono l’attributo dei dati 🙂

Oltre alla risposta di Xavi Martínez evitando il salto al click

Evitare il salto

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

Schede annidate

implementazione con carattere “_” come separatore

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

Abbiamo usato il trigger jquery per caricare su di un programma che ha colpito il pulsante per noi

$ ( “Nome_class”) trigger ( ‘click’).;

Esiste una soluzione dopo aver ricaricato la pagina e aver mantenuto la scheda prevista come selezionata.

Supponiamo che dopo aver salvato i dati l’url rediretto sia: my_url # tab_2

Ora attraverso questo script seguente la tua scheda prevista rimarrà selezionata.

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

Guai, ci sono tanti modi per farlo. Mi è venuto in mente questo, breve e semplice. Spero che questo aiuti gli altri.

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