Получение URL-адреса хэша и его использование в jQuery

Я хотел бы получить значение после хэша в URL текущей страницы, а затем иметь возможность применить это в новой функции ... например.

URL может быть

www.example.com/index.html#foo

И я хотел бы использовать это в сочетании со следующим фрагментом кода

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

Я предпочитаю / надеюсь, что есть какой-то способ схватить это и превратить в переменную, которую я затем смогу использовать во втором фрагменте кода.

Примечание редактора: приведенный ниже подход имеет серьезные последствия для безопасности и, в зависимости от используемой версии jQuery, может подвергать ваших пользователей атакам XSS. Для получения более подробной информации см. Обсуждение возможной атаки в комментариях к этому ответу или в этом объяснении на Security Stack Exchange .

Вы можете использовать location.hashсвойство, чтобы получить хеш текущей страницы:

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

Обратите внимание, что это свойство уже содержит #символ в начале.

На самом деле вам не нужен :firstпсевдо-селектор, так как вы используете селектор идентификаторов , предполагается, что идентификаторы уникальны в DOM.

Если вы хотите получить хеш из строки URL, вы можете использовать String.substringметод:

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

Совет: имейте в виду, что пользователь может изменять хэш по своему усмотрению, вводя что-либо в ваш селектор, вы должны проверить хэш перед его использованием.

location.hash не является безопасным для IE , в случае IE (включая IE9), если ваша страница содержит iframe, то после обновления вручную внутри содержимого iframe получите значение location.hash (значение для загрузки первой страницы). значение, полученное вручную, отличается от значения location.hash, поэтому всегда извлекайте его через document.URL

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

Для тех, кто ищет чистое решение javascript

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

Надеюсь, это сэкономит вам время.

Начиная с jQuery 1.9, :targetселектор будет соответствовать хешу URL. Так что вы могли бы сделать:

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

Который выберет элемент с идентификатором, соответствующим хешу, и покажет его.

Я бы посоветовал лучше сначала использовать cek, если на текущей странице есть хеш. Иначе это будет undefined.

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

Я использую это для устранения последствий для безопасности, отмеченных в ответе @ 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...
    }
});