Il modo migliore per rendere persistenti le schede di bootstrap di Twitter

Question

Qual è il modo migliore per rendere persistenti queste schede?

http://twitter.github.com/bootstrap/javascript.html#tabs

Per aggiungere un po 'di contesto, questo è per un'applicazione Rails. Sto passando un array [tab1, tab2] alla mia vista, rendendo entrambe le schede e utilizzando il plug-in della scheda bootstrap per attivare la loro visibilità.

Answer 1

Questo codice seleziona la scheda a destra a seconda del # hash e aggiunge il diritto #hash quando si fa clic su una scheda. (Puo utilizza jquery)

In CoffeeScript:

$(document).ready -> 
    if location.hash != '' 
     $('a[href="'+location.hash+'"]').tab('show') 

    $('a[data-toggle="tab"]').on 'shown', (e) -> 
     location.hash = $(e.target).attr('href').substr(1) 

o in JS:

$(document).ready(function() { 
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show'); 
    return $('a[data-toggle="tab"]').on('shown', function(e) { 
     return location.hash = $(e.target).attr('href').substr(1); 
    }); 
}); 

Answer 2

è possibile ottenere il frammento di URL (che è la parte dell'URL dopo #) sul carico tramite window.location.hash, e impostare in particolare quella scheda come visibile:

if (window.location.hash) { 
    $(window.location.hash).tab('show') 
} 

Answer 3

Ecco un altro modo per risolvere il problema.

Prima aggiungere una linea per l'evento click per mostrare l'hash nel AddressBar

$('#myTab').on('click', 'a', function (e) { 
    e.preventDefault(); 
    // add this line 
    window.location.hash = $(this).attr('href'); 
    $(this).tab('show'); 
}) 

Quindi assicurarsi che la scheda a destra si attiva onload con l'aggiunta di questa parte per il documento chiamata pronto.

if(window.location.hash){ 
    $('#myTab').find('a[href="'+window.location.hash+'"]').tab('show'); 
} 

Tutti insieme si può scrivere questo:

// cache the id 
var navbox = $('#myTab'); 
// activate tab on click 
navbox.on('click', 'a', function (e) { 
    var $this = $(this); 
    // prevent the Default behavior 
    e.preventDefault(); 
    // set the hash to the address bar 
    window.location.hash = $this.attr('href'); 
    // activate the clicked tab 
    $this.tab('show'); 
}) 

// if we have a hash in the address bar 
if(window.location.hash){ 
    // show right tab on load (read hash from address bar) 
    navbox.find('a[href="'+window.location.hash+'"]').tab('show'); 
} 

Answer 4

volevo migliorare la risposta migliore qui ..

merito va a Sucrenoir, ma se si vuole evitare di saltare sulla pagina quando si cambia le schede, utilizzare questo codice migliorato:

$(document).ready(function() { 
    // show active tab on reload 
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show'); 

    // remember the hash in the URL without jumping 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { 
     if(history.pushState) { 
      history.pushState(null, null, '#'+$(e.target).attr('href').substr(1)); 
     } else { 
      location.hash = '#'+$(e.target).attr('href').substr(1); 
     } 
    }); 
}); 

Answer 5

Un'altra versione modificata, se non si vuole scheda scatta da aggiungere alla storia, ma anche non vogliono pagina saltando su e giù:

$(document).ready(function() { 

    if (location.hash !== '') { 
    $('a[href="' + location.hash + '"]').tab('show'); 
    } 

    $("a[data-toggle='tab']").on("shown.bs.tab", function (e) { 
    var hash = $(e.target).attr("href"); 
    if (hash.substr(0,1) == "#") { 
     var position = $(window).scrollTop(); 
     location.replace("#" + hash.substr(1)); 
     $(window).scrollTop(position); 
    } 
    }); 

}); 

Answer 6

eseguire il codice seguente dopo il carico DOM:

$('a[data-toggle=tab]').on('click', function() { 
    history.pushState(null, null, $(this).attr('href')); 
}); 


if (window.location.hash) { 
    $('a[data-toggle=tab][href="' + window.location.hash + '"]').tab('show'); 
} 

Tuttavia, questo porta a poveri l'esperienza utente, in quanto scheda attualmente attiva verrà mostrato prima, e poi sarà passato a uno scheda da location.hash

Answer 7

volevo migliorare le due migliori risposte qui .. :)

Credito va a Sucrenoir e d-wade.

Perché nel codice viene utilizzata l'API della cronologia non è possibile utilizzare onchangehash (https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange). Questo codice aggiunge la funzionalità del pulsante Indietro (https://developer.mozilla.org/cs/docs/Web/API/WindowEventHandlers/onpopstate).

// show active tab on reload 
if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show'); 
// remember the hash in the URL without jumping 
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { 
    if(history.pushState) { 
     history.pushState(null, null, '#'+$(e.target).attr('href').substr(1)); 
    } else { 
     location.hash = '#'+$(e.target).attr('href').substr(1); 
    } 
}); 
// remember to back button 
window.onpopstate = function(e) { 
    $('a[href="' + location.hash + '"]').tab('show'); 
};