Работа с одностраничными веб-сайтами и поддержание состояния с использованием URL-хэша и jQuery - PullRequest
12 голосов
/ 06 ноября 2010

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

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

Ответы [ 4 ]

29 голосов
/ 06 ноября 2010

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

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

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

if(window.location.hash === "graphicsDesign" ||
window.location.hash === "somethingElse") {
    loadContent(window.location.hash);
}
8 голосов
/ 06 ноября 2010

Плагин jQuery BBQ ("Back Button & Query") также хорош.http://benalman.com/projects/jquery-bbq-plugin/

2 голосов
/ 06 ноября 2010

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

0 голосов
/ 06 ноября 2010

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...