Создание эффекта всплывающего окна с помощью hashtags

Я создаю скрипт, который позволяет запускать всплывающие окна на основе хэштега URL. Я могу заставить его работать, когда пользователь подключается к URL + хешу прямо в строке местоположения. Однако, когда клики привязаны, скрипт, похоже, не выполняет функцию .load(). Является ли моя последовательность неправильной, или я об этом совершенно неправильно?Создание эффекта всплывающего окна с помощью hashtags

<script> 
$(document).ready(function() { 
var loc = window.location.hash; 
var container = $('.container'); 
if (loc == "#content1") { $('.container').load('content1.html') } 
if (loc == "#content2") { $('.container').load('content2.html') } 
}); 
</script> 
<body> 

<ul class="navigation"> 
<li><a href="#content1">Launch content1</a></li> 
<li><a href="#content2">Launch content2</a></li> 
</ul> 

<div class="container"></div> 

</body>

источник

2010-06-29 Marc P

Вам нужно будет либо сделать функцию для вызова или использовать window.location или что-то с этой целью, чтобы получить то, что вы хотите. Ваш код jQuery запускается сразу после загрузки страницы, и просто щелчок по этим ссылкам не перезагружает страницу.

источник

2010-06-29 21:37:38 Jason

Ваш скрипт будет запускаться только при первой загрузке страницы. При нажатии на якорь, содержащий хэш-фрагмент, страница не перезагружается, поэтому ваш скрипт в $ (document) .ready ... больше не будет запускаться.

Я думаю, что вы хотите добавить плагин JQuery событий Hashchange: http://benalman.com/projects/jquery-hashchange-plugin/

Затем вы можете связать действия в случае hashchange, который будет выполнять функцию обратного вызова, когда пользователь изменяет хэш-фрагмент, нажав ваши ссылки. Ваш скрипт будет выглядеть примерно так:

$(window).bind('hashchange', function() { 
pageCaller(); 
}); 

function pageCaller() { 
var loc = window.location.hash; 
var container = $('.container'); 
if (loc == "#content1") { $('.container').load('content1.html') } 
if (loc == "#content2") { $('.container').load('content2.html') } 
} 

pageCaller();

источник

2010-06-29 21:39:42 hundredwatt

Спасибо, что полностью сработало! (Я отправил сжатую версию, используя функцию, чтобы сделать ее более чистой в комментарии для себя.) –

Отредактировано мое, чтобы включить ваш код DRYer. Рад, что смог помочь! – hundredwatt

Спасибо @hundredwatt, плагин полностью сработал! Я дополнительно конденсировал код с некоторым действием функции():

$(window).bind('hashchange', function() { 
pageCaller(); 
}); 

function pageCaller() { 
var loc = window.location.hash; 
var container = $('.container'); 
if (loc == "#content1") { $('.container').load('content1.html') } 
if (loc == "#content2") { $('.container').load('content2.html') } 
} 

pageCaller();

источник

2010-06-29 22:05:07

Создание эффекта всплывающего окна с помощью hashtags

ответ

Смежные вопросы