基本上，我需要的是获取 fancybox 链接以将地址栏中的 url 更改为如下所示: www.website.com/page/#lightbox
此外，如果我访问 www.website.com/page/#lightbox，那么与该链接对应的灯箱将自动打开。
这个网站就是一个很好的例子: http://www.rudirakete.de/rudirakete/main#2008-10-5-1524260693
最佳答案
诀窍是基于一些主题标签创建一个函数来显示您想要的内容。最简单的方法是将主题标签的值设置为您想要在 fancybox 中显示的页面上某些元素的 ID(尽管绝不是必需的)。
然后，只需使用链接 href 的主题标签，不要在这些链接上使用 jQuery 的 preventDefault() 函数。这样，这些链接将更改 URL 栏，附加您设置为其 href 值的哈希标签。然后，将显示 fancybox 的函数附加到这些链接。
最后，使用 location.hash 的值作为参数来调用该函数。
只是将其作为一个简单的示例。似乎做你想做的事。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="fb/fb.js" type="text/javascript"></script>
<link rel="stylesheet" href="fb/fb.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" charset="utf-8">
$(function(){
function showfb(id) {
switch(id) {
case '#fb1':
case '#fb2':
// Gotta do this so that fb can measure the content dimensions
$(id).show();
$.fancybox({
href: id,
type:'inline',
// This is so that the content doesn't just pop back on to the
// page when finished. Of course, if you're not using inline content
// then this may not apply
onClosed: function() {
$(id).hide();
}
});
break;
}
}
showfb(location.hash);
$('a.fblink').click(function(e){
showfb($(this).attr('href'));
});
});
</script>
<style type="text/css" media="screen">
/* I'm assuming you want the fancybox content to
ONLY be displayed in the fancybox. Once again, if using
ajax or some other method of getting fancybox content, this might
not be necessary */
.fb { display: none; }
</style>
</head>
<body>
<p>
<a class='fblink' href="#fb1">Show 1</a>
</p>
<p>
<a class='fblink' href="#fb2">Show 2</a>
</p>
<div id="fb1" class="fb">This is a test</div>
<div id="fb2" class="fb">This is another test</div>
</body>
</html>
关于javascript - Fancybox:更改地址栏中的 url 并链接到打开 Fancybox 的页面的链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7843823/