Один файл дизайна сайта с использованием видимости на классах / идентификаторах DIV

Question

Я создаю одностраничный (один файл) сайт и хочу понять, выбираю ли я наиболее практичный и интеллектуальный подход. Сайт представляет собой простой сайт для графического дизайнера. Он имеет 4 "страницы", которые "обо мне", "контакт", "работа" и "фотографии". То, что я хочу сделать, - это иметь 4 div (абсолютно расположенных в одном месте), и только один виден одновременно. Когда вы нажимаете на любую из ссылок, она отключает видимость других и нажатую ссылку. Хотя есть несколько способов сделать это:

• Должен ли я использовать видимость, чтобы показать / скрыть слои?
• Должен ли я использовать Z-Index, чтобы показать / скрыть слои?
• Является ли jQuery лучшим способом справиться с этим?
• Является ли использование классов, таких как .visible .hidden, лучшим способом для циклического отображения, какие элементы div показаны / скрыты?
• Есть ли еще какие-нибудь советы, как сделать это для максимальной эффективности?

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

Спасибо за понимание.

Answer 1

Как указал Пекка, могут быть аргументы против того, чтобы делать это как однофайловый сайт. Но я предполагаю, что у вас есть убедительный вариант использования. Отвечая на вопрос:

Я бы подошел к этому так:

• Используйте четыре деления.
• Нет необходимости их абсолютно позиционировать, просто ставьте их один за другим.
• Дайте каждому div отдельный идентификатор с семантическим именем (например, "about", "contact" и т. Д.).
• Не скрывайте любых из них изначально, просто позвольте им показывать один за другим. Теперь страница может использоваться людьми без Javascript, и она отлично работает для поисковых систем.
• При загрузке страницы используйте Javascript, чтобы скрыть все, кроме того, который вы хотите показать.
• Определите, какой из них вы хотите показать, посмотрев на привязку в этом местоположении, например, "#about" означает, что вы хотите показать about div, "#contact" означает, что вы хотите показать страницу контакта.
• Когда вы переходите от одного к другому, меняйте привязку, чтобы соответствовать. Теперь сайт доступен для добавления в закладки / ссылки.
• Подумайте об использовании подключаемого модуля истории для управления якорями, чтобы вы могли получать прямую и обратную поддержку, не разрывая головы при всех несоответствиях браузера. : -)

Answer 2

Не ответ на ваши вопросы, но есть веские причины выступать против такого подхода.

• Самое главное, он не будет работать с отключенным JavaScript. Это будет совершенно непригодно для тех, у кого нет JavaScript. Это делает его абсолютно нет-нет для меня.

• Это делает невозможным ссылки на определенные страницы

• Это кошмар SEO - возможно, это не так важно на 4-страничном сайте, но все же стоит упомянуть

• Сопровождение становится более сложным, поскольку четыре или более сложных структур страниц объединены в одну

Answer 3

Я думаю, что использование Jquery было бы лучшим способом для достижения этого эффекта. Пекка отметил, что это не будет работать для пользователей, у которых отключен JavaScript, но на самом деле - сколько людей отключили JavaScript в эти дни? Практически каждый веб-сайт, который вы посещаете, основан на JavaScript.

На мой взгляд, лучший способ получить вкладки с помощью jquery - это использовать плагин, разработанный редактором Nettuts Джеффри Вей. Его личный сайт, на котором расположен плагин, находится в стадии разработки, но я его недавно загрузил. Вот ссылка на zip-файл с необходимыми файлами внутри.

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

JW-Tabs

Надеюсь, это поможет.

Answer 4

Если вы используете jQuery, просто вызовите .show () и .hide () , чтобы переключить разделы.

Однако, как отмечает @Pekka, лучше оставить их как отдельные страницы.