Вкладки на страницах сайта позволяют великолепно структурировать информацию, изначально скрывая какую-то её часть.
Создание вкладок позволяет экономить ГРОМАДНОЕ(!) количество места на сайте, что в свою очередь
даёт возможность умещать "большое в малом".
Пример действующих вкладок Вы, если были, уже могли раньше видеть в разделе о jQuery UI.
Если же Вы ещё там не были, то для сравнения откройте эту страницу:
"Умные вкладки"(откроется в новом окне).
А здесь я покажу, по сути, такие же вкладки, но сделанные исключительно БЕЗ использования
каких бы то ни было скриптов. Только HTML + CSS!
И, что самое интересное, они работают точно так же - при клике по ним, они открываются БЕЗ перезагрузки страницы.
Впрочем, чем читать мои восторженные слова об их достоинствах, лучше посмотрите, и сами увидите, как работают вкладки для сайта
на этой странице. Покликайте по ним.
Однако!
Я не знаю на каком устройстве Вы просматриваете сайт. Поэтому, прежде, чем кликать по вкладкам, сначала ознакомьтесь с дополнением
к примеру. Вот оно:
Пример вкладок
Представленный пример создания и использования вкладок, отлично показывает
возможности CSS для управления расположением элементов на странице.
Всё содержимое блоков вкладок прописывается в коде HTML, а вот их расположение
и отображение, т.е. внешний вид, прописал в отдельной таблице стилей.
Содержимое вкладок может быть абсолютно произвольным: текст, ссылки, рисунки,
аудио-плееры, видео, и т.д., и т.п.. Короче - всё, что только вздумается!
*Кстати! Под вкладкой №3 сможете проверить последнее утверждение, и послушать
приятную музыку.
А вкладка №4 даст посмотреть интересное видео с YouTube, из которого Вы узнаете, чему нужно учиться, чтобы делать
подобные вкладки с помощью скриптов.
Создание вкладок
Шапка с названиями вкладок создана с помощью тэгов "input", которым в атрибутах я
установил тип "radio".
К тому же - атрибут "name" у всех input-ов в шапке вкладок одинаковый: "inset", что позволяет
выбрать любую вкладку, а предыдущая, при этом, отключится.
В своём обычном состоянии, т.е. без их переопределения в дополнительной таблице стилей, они бы
отображались маленькими кружочками. Вот такими: Ну,
а как они выглядят сейчас, Вы видите.
Если нужно изменить цвет всех вкладок, либо цвет какой-то одной вкладки сайта, это очень легко
делается в подключённой дополнительной таблицеCSS.
И последнее.
Добавил интересную возможность(!) использования пустого тэга "input",
прописав его с тем же именемпрямо в контент вкладки. Попробуйте!
Закрыть все вкладки
*P.S. Этот пример прописал только в HTML-коде через атрибут "style". Таблицу стилей не трогал. *В остальных вкладках такую кнопку делать не стал.*
Вторая вкладка. Специально сделал содержание, скрытое в ней, маленьким,
чтоб было видно, что размер (высота) вкладки автоматически регулируется содержимым.
Желающие скачать себе этот курс (бесплатно), найдут его здесь:
"Полезное"(откроется в новом окне).
Содержимое этой вкладки Вы можете не только читать, но и слышать. Конечно, если
только Ваше устройство способно понимать файлы mp3.
В "Яндекс-браузере" такое установлено "по умолчанию", а вот в различных мобильных устройствах: планшетах, смартфонах
возможно установлены другие кодеки. Но, скорее всего, они тоже понимают такие популярные файлы, и Вы сейчас видите аудиоплеер,
и можете запустить его для прослушивания.
Желая перейти на любую другую вкладку, остановите аудиоплеер, а иначе звук его музыки всё равно будет слышно.
Если Вы не видите сейчас стандартный аудиоплеер, то стало быть, и не слышите приятную музыку, установленную в него.
Как сделать плеер для вкладки сайта, можете узнать здесь:
"Аудио и Видео на HTML"(откроется в новом окне).
В этой же, четвёртой вкладке, сохранил для Вас уже целое видео. Сможете посмотреть вводный видео-урок по технологии
JavaScript и jQuery.
Подключил его сюда, чтобы Вы могли оценить, насколько проще показанный способ создания вкладок для сайта
с помощью одних лишь только HTML+CSS, чем делать это с использованием скриптов.
Желая перейти на другую вкладку, остановите видеоплеер, иначе звуковую составляющую урока всё равно будете слышать.
В своё время сам начинал учиться, а потом неоднократно возвращался к нему, тренируясь по этому великолепнейшему(!)
обучающему курсу.
Результаты изучения, кого интересует, здесь:
JAVASCRIPT(откроется в новом окне).
А в этом примере вкладки Вы можете посмотреть, сколько(!) стороннего кода нужно для организации такого же
эффекта средствами jQuery UI.
Этот скриншот взял со своего же сайта, со страницы
"Современные технологии"(откроется в новом окне).
На ней Вы сможете подробно узнать, для чего я такой скриншот сделал, да и вообще всю, указанную в ссылке страницу.
* * *
Действие показанного примера вкладок для сайта в точности совпадает с тем, ссылку на который я давал в начале страницы.
НО! Количество кода здесьминимум в 10 раз(!) меньше, чем в аналогичном примере,
созданном с помощью jQuery UI.
Дополнение к примеру вкладок
Надеюсь, продемонстрированный пример создания простых HTML + CSS вкладок для сайта
Вам понравился. Мне - так очень!
И действительно. Трудно сказать, чего нельзя сделать с их помощью, причём, всё можно разместить компактно.
Страница сайта не будет перегружена.
Однако!
Проверяя сделанное на разных электронных устройствах, обнаружил, что НЕ ВСЕ они поддерживают такой
простой способ создания вкладок для сайта.
На каких устройствах проверял? Вот на этих:
Так вот - смартфон с О.С. "Андроид" (он на фото нижний слева) категорически не хотел реагировать
ни на смену вкладок, ни на свёртывание первой из них.
Остальные же электронные друзья: стационарный компьютер, ноутбук, планшет работали, как полагается.
**Да! Кстати!
У планшета та же самая операционная система, и такой же браузер "Google Chrome", но, видимо, не столь "замобиленный"
, как у смартфона.
И в то же время - упомянутый в самом начале страницы способ создания таких вкладок с помощью jQuery UI, хоть и
содержит очень много(!) кода, однако признаётся всеми устройствами БЕЗ ИСКЛЮЧЕНИЯ!
Вот такое дополнение к примеру вкладок ... ... ... .
Надеюсь, оно поможет Вам решить, как лучше сделать вкладки на странице сайта.
* * *
А в дополнение к увиденному, посмотрите ещё один интересный раздел, внешние эффекты которого очень похожи на действие вкладок.
Такой раздел находится здесь:
"Спойлер на JavaScript"(откроется в новом окне).
Желая перейти на любую другую вкладку, 
, как у смартфона.
