Хитрость заключается в создании единой функции для отображения содержимого, которое вы хотите, на основе некоторого хэштега.Самый простой способ сделать это, сделать значение хэштега также идентификатором некоторого элемента на странице, которую вы хотите отобразить в fancybox (хотя это ни в коем случае не требуется).
Затем просто используйте хештеги для своегосвязывайте ссылки и не используйте функцию 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>