Работа с веб-сайтами одной страницы и сохранение состояния с использованием хеша URL-адреса и jQuery

Я работаю над своим портфолио, делая его полностью основанным на jQuery. Поэтому моя проблема заключается в том, когда вы переходите на страницу, затем обновляетесь, и она снова приведет вас на домашнюю страницу. На самом деле у меня есть два вопроса.

Как вы (через jQuery/Javascript) получаете "хеш-код" из URL-адреса?
- например. Я хочу смелую часть этого: http://portfolio.theadamgaskins.com/Portfolio/ #graphicsDesign
Как изменить URL-адрес в адресной строке при переходе на новую страницу, чтобы содержать хеш-код этой страницы?
- например. когда вы переходите на страницу graphicsDesign, ссылка в адресной строке изменяется на http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign

Ответ 1

Вы делаете опорную точку внутренней ссылкой следующим образом:

<a href="#graphicsDesign">Graphics</a>

И затем просто сделайте jQuery ответом на событие click и позвольте браузеру следовать внутренней ссылке естественным образом. Теперь браузер должен иметь внутреннюю ссылку в адресной строке. Вы можете использовать следующий JavaScript для анализа URL и затем загрузить правильную часть документа HTML. Вам нужно будет написать код, чтобы загружать правильный контент, исходя из того, что является внутренним адресом браузера.

if(window.location.hash === "graphicsDesign" ||
window.location.hash === "somethingElse") {
    loadContent(window.location.hash);
}

Ответ 2

Плагин jQuery BBQ ( "Back Button and Query" ) неплохой. http://benalman.com/projects/jquery-bbq-plugin/

Ответ 3

Используйте один из многих доступных плагинов истории, например. здесь: http://plugins.jquery.com/project/jquery-history-web-2-0-hashchange-history-remote

Ответ 4

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

Тем не менее, обязательно начните со всех скрытых div и затем отобразите выбранный.

Я также рекомендую плагин Cowboy BBQ, который поможет вам справиться с кнопкой возврата, а также перезагрузить: http://benalman.com/projects/jquery-bbq-plugin/