jquery - example - twitter card tags

La mejor manera de hacer que las pestañas de inicio de Twitter sean persistentes.

Question

¿Cuál es la mejor manera de hacer que estas pestañas persistan?

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

Para agregar algo de contexto, esto es para una aplicación de rieles. Estoy pasando una matriz [tab1, tab2] a mi vista, representando ambas pestañas y utilizando el complemento de la pestaña bootstrap para cambiar su visibilidad.

Answer 1

Aquí hay otra forma de resolver el problema.

Primero agregue una línea al evento de clic para mostrar el hash en la barra de direcciones

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

Luego, asegúrese de que la pestaña derecha esté activada al onload agregando esta parte a su llamada de documento listo.

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

Todos juntos podéis escribir esto:

// 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 2

Ejecute el siguiente código después de cargar el 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'');
}

Sin embargo, esto lleva a una mala experiencia en la interfaz de usuario, ya que la pestaña activa se mostrará primero, y luego se cambiará a una pestaña desde location.hash

Answer 3

Este código selecciona la pestaña derecha según el #hash y agrega el #hash correcto cuando se hace clic en una pestaña. (esto usa jquery)

En 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 en 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 4

Otra versión modificada si no desea que se agreguen clics de pestañas al historial, pero tampoco desea que la página salte hacia arriba y hacia abajo:

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

Probado para Bootstrap 4, código minimalista (2 líneas) sin inserción de historial, que funciona en cualquier página con las pestañas de navegación.

<script type="text/javascript">
$(document).ready(function(){
// store the currently selected tab in the hash value
$(''a[data-toggle="tab"]'').on(''shown.bs.tab'', function (e) { location.replace($(e.target).attr("href")); });
// switch to the currently selected tab when loading the page
$(''.nav-tabs a[href="'' + window.location.hash + ''"]'').tab(''show'');
});
</script>

Answer 6

Puede obtener el fragmento de la URL (que es la parte de la URL después de # ) en la carga usando window.location.hash , y específicamente establecer esa pestaña como visible:

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

Answer 7

Quería mejorar la mejor respuesta aquí ..

El crédito es para Sucrenoir, pero si desea evitar saltar en la página cuando cambia las pestañas, use este código mejorado:

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

Quería mejorar las mejores dos respuestas aquí ... :)

El crédito va para Sucrenoir y D-Wade.

Debido a que en el código se usa la API de historial, no puede usar onchangehash ( https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange ). Este código agrega la funcionalidad del botón Atrás ( 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'');
};