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