如何在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">。

如果用户输入带有散列标记#popup的URL（即example.com/#popup），我可以默认打开吗？

Answer 1

使用在你的CSS一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(); 
} 

逸Fiddle