Система для обработки хэш-бирков для содержимого вкладок? (! #)

Question

У меня есть четыре страницы на главной части сайта, над которым я работаю, с вкладками переключаться между ними. Я хочу переключение между 4 вкладками быть исчезновенным переходом (используя jQuery). Это все хорошо и денди, но я также хочу SEO думать о каждой как отдельной странице. Я также хочу иметь возможность ссылаться на URL-адрес и для этого поднять правильный контент, хотя оно технически такая же страница.

Facebook делает это (Facebook.com/#!/Another-string-hate), и вы можете переключаться между изображениями и так далее, так что это втул, как javaScript QueryString.

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

Есть ли рекомендуемый метод для того, как это сделать?

---

Обновить лучшее, что я нашел, это Sammyjs - не реализован, но он выглядит лучшим ответом:http://sammyjs.org/

Answer 1

Допустим, у вас есть базовая страница, называемая services, И эта страница имеет две вкладки: design а также development (просто для упрощения). Так что если ваш домен был example.com, Ваш хэш URL, нажав на вкладку «Дизайн», будет выглядеть что-то вроде http://example.com/services#!/design, и похоже на развитие. Я предполагаю, что вы знаете, как это сделать.

Чтобы поисковые системы распознают вкладки, что вы делаете Сделайте статическую версию каждой страницы. Отказ Так что у вас будет один на http://example.com/services/design и один http://example.com/services/development. Отказ То href Атрибут каждой вкладки фактически указывает на эти статические страницы, но вы прикрепите обработчик OnClick к каждой вкладке, чтобы заставить его перейти в версию HASH.

Таким образом, клиенты с поддержкой JavaScript получит вашу страницу AJAXY с помощью своей страницы с помощью хеш-меток и эффектами выцветания, в то время как клиенты без JavaScript включены (включая веб-скалы), увидят нормальные, статические ссылки, и все выигрывают.

---

Для записи это похоже на то, что делает Facebook. Они выходят на шаг дальше и используют новый HTML5 history.pushState() Функция в браузерах, которые поддерживают его, чтобы исключить потребность в хеш-теге целиком. (Видеть этот вопрос для получения дополнительной информации.)

Answer 2

Ну, чтобы иметь это оба пути невозможны (метод Facebook и SEO), поскольку сервер не отправляет хеш-тег, а большинство поисковых систем (Google и т. Д.) Не запускают JavaScript.

Теперь, если вы просто хотите эффект затухания, вы можете настроить его так, чтобы если есть хеш-тег в URL, например, #fade, jQuery установит непрозрачность на 0, ждать нагрузки и исчезнуть. Чтобы получить исчезновение вы устанавливаете слушателей событий на ссылках, e.preventDefault() или return false В этой функции и исчезают непрозрачность. Как только это сделано исчезновение, у вас будет изменение JavaScript на новую страницу location.href="site" с хэшем #fade

Редактировать: пример: http://fiddle.jshell.net/msm595/u5eg2/3/show/light/