URLハッシュの場所を取得し、jQueryで使用する

現在のページのURLのハッシュの後に値を取得し、これを新しい関数に適用できるようにしたい...例

URLは

www.example.com/index.html#foo

そして、これを次のコードと組み合わせて使用​​したいと思います

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

これを取得し、変数に変換して2番目のコードで使用できるようにする方法があることを前提としています。

編集者注：以下のアプローチはセキュリティに重大な影響を及ぼし、使用しているjQueryのバージョンによっては、ユーザーをXSS攻撃にさらす可能性があります。詳細については、この回答のコメントまたはSecurity Stack Exchangeに関するこの説明の中で、起こり得る攻撃の説明を参照してください。

location.hashプロパティを使用して、現在のページのハッシュを取得できます。

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

このプロパティにはすでに#シンボルが最初に含まれていることに注意してください。

IDセレクター:firstを使用しているため、実際には疑似セレクターは必要ありません。IDは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の値はold（最初のページのロードの値）になります。手動で取得した値は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();

ハッシュに一致するIDを持つ要素を選択して表示します。

現在のページにハッシュがある場合、最初に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...
    }
});