Нажмите "Событие", чтобы запустить при использовании кнопок браузера "назад" и "вперед"

Question

Я использую событие щелчка, чтобы показать скрытый встроенный div. В настоящее время я использую событие Jhery hashchange Бена Алмана http://benalman.com/projects/jquery-hashchange-plugin/ чтобы кнопки браузера вперед и назад отображали ссылки на хэштеги в URL. Проблема в том, что скрытые элементы остаются скрытыми, когда вы идете вперед и назад, и мне нужно их показать.

HTML:

<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
<li><a href="#link3">Link 3</a></li>
<li><a href="#link4"><Link 4</a></li>
</ul>

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

Автор сценария:

$("#link1").click(function() {
    $("#div1").fadeIn("400");
    $("#div2, #div3, #div4").hide(); 
});
$("#link2").click(function() {
    $("#div2").fadeIn("400");
    $("#div1, #div3, #div4").hide();
});

Answer 1

Если вы согласны со сменой плагина hashchange, я могу порекомендовать jQuery Address.
Смотрите здесь http://www.asual.com/jquery/address/

Чтобы поймать изменение хеша, напишите:

$.address.change(function(event) {
    // Your code here
});

Хорошая вещь об этой функции hashchange состоит в том, что плагин гарантирует, что он всегда вызывается после document.ready, так что вам не нужно об этом.

event.pathNames [0] будет хешем, который вам нужен. Вы можете использовать его в окне изменений и показать желаемые элементы div.

Посмотрите эту демонстрацию (я думаю, что она делает именно то, что вам нужно. Проверьте это с помощью кнопок браузера):
http://www.asual.com/jquery/address/samples/api/

Пример использования: http://www.asual.com/jquery/address/docs/