jquery - jQueryでハッシュ#popupでコンテンツボックスを開く方法

Question

これが基本的な HTML マークアップです。

<a id="open" href="#popup">click</a>
<div id="popup">content</div>

<div id="popup">デフォルトで非表示にして、クリックして<a id="open">開き<div id="popup">ます。

ユーザーがハッシュタグ付きの URL を入力した場合にデフォルトで開くようにすることはできます#popupかexample.com/#popup?

Answer 1

CSS で a を使用display: none;します。

#popup {
    display: none;
}

次に、JS で次のいずれかを使用します。

$("#open").on('click', function(e) {
    e.preventDefault();
    $("#popup").toggle(); //When clicked, toggle visibility.
});

$(window).on('hashchange', function() {
    //You can detect a hash change like this
    //Since your href is set to #popup,
    //you can put the .toggle() in here as the hash will change when clicked.
    console.log("yolo");
});

if(window.location.hash == "#popup") {
    //If it is initialized with the hash #popup (ie. example.com#popup and Enter)
    //Use this
    console.log("yolo2");
    $("#popup").show();
}

ダット・フィドル