Obtener la ubicación de hash de URL y usarla en jQuery

Me gustaría obtener el valor después de un hash en la URL de la página actual y luego poder aplicarlo en una nueva función ... por ejemplo.

La URL podría ser

www.example.com/index.html#foo

Y me gustaría usar esto junto con el siguiente código

$('ul#foo:first').show();

Estoy asumiendo / esperando que haya alguna forma de agarrar esto, y convertirlo en una variable que luego pueda usar en el segundo fragmento de código.

Nota del editor: el siguiente enfoque tiene serias implicaciones de seguridad y, dependiendo de la versión de jQuery que esté utilizando, puede exponer a sus usuarios a ataques XSS. Para obtener más detalles, consulte la discusión sobre el posible ataque en los comentarios sobre esta respuesta o esta explicación en Security Stack Exchange .

Puede usar la location.hashpropiedad para obtener el hash de la página actual:

var hash = window.location.hash;
$('ul'+hash+':first').show();

Tenga en cuenta que esta propiedad ya contiene el #símbolo al principio.

En realidad no necesita el :firstpseudo-selector ya que está utilizando el selector de ID , se supone que las ID son únicas dentro del DOM.

En caso de que desee obtener el hash de una cadena URL, puede usar el String.substringmétodo:

var url = "http://example.com/file.htm#foo";
var hash = url.substring(url.indexOf('#')); // '#foo'

Consejo: Tenga en cuenta que el usuario puede cambiar el hash como quiera, inyectando cualquier cosa en su selector, debe verificar el hash antes de usarlo.

location.hash no es seguro para IE , en el caso de IE (incluido IE9), si su página contiene iframe, luego de la actualización manual dentro del contenido del iframe, obtenga el valor location.hash es antiguo (valor para la primera carga de la página). mientras que el valor recuperado manualmente es diferente de location.hash, recuérdelo siempre a través de document.URL

var hash = document.URL.substr(document.URL.indexOf('#')+1) 

Para aquellos que buscan una solución javascript pura

 document.getElementById(location.hash.substring(1)).style.display = 'block'

Espero que esto te ahorre algo de tiempo.

Desde jQuery 1.9, el :targetselector coincidirá con el hash de URL. Entonces podrías hacer:

$(":target").show(); // or $("ul:target").show();

Que seleccionaría el elemento con la ID que coincida con el hash y lo mostraría.

Sugeriría mejor cek primero si la página actual tiene un hash. De lo contrario lo será undefined.

$(window).on('load', function(){        
    if( location.hash && location.hash.length ) {
       var hash = decodeURIComponent(location.hash.substr(1));
       $('ul'+hash+':first').show();;
    }       
});

Estoy usando esto para abordar las implicaciones de seguridad señaladas en la respuesta de @ CMS.

// example 1: www.example.com/index.html#foo

// load correct subpage from URL hash if it exists
$(window).on('load', function () {
    var hash = window.location.hash;
    if (hash) {
        hash = hash.replace('#',''); // strip the # at the beginning of the string
        hash = hash.replace(/([^a-z0-9]+)/gi, '-'); // strip all non-alphanumeric characters
        hash = '#' + hash; // hash now equals #foo with example 1

        // do stuff with hash
        $( 'ul' + hash + ':first' ).show();
        // etc...
    }
});