Html вкладки на странице. Как сделать адаптивные табы (вкладки) на css без использования скриптов. Как заставить это работать
Хотя основа основ дизайна — это творчество, всё-таки некоторые элементы интерфейса сайта будет полезно иметь в запасе. В этой статье я покажу 15+ самых важных деталей пользовательского интерфейса сайта , которые пригодятся каждому. Используя эти небольшие подсказки, вы сможете получить красивый и практичный дизайн , используя меньше сил и времени.
1. Сетка
Страница, кроме авторского контента, обычно содержит в себе ещё и место под баннер, место под рекламу, под ссылки и прочее… Важно, чтобы эти места не портили общий вид сайта , и были в то же время удобно расположены. Поэтому удобно использовать разметку страницы. Классическая разметка страницы вот такая:
Бренд (логотип, слоган и т.д.), в левом верхнем углу
Навигация — в верхней части сайта, а также желательно слева
Основное содержание — центр страницы
Объявления — справа страницы
Footer не содержит в себе важной информации (либо содержит её дубликат), обычно это ссылки на внутренние страницы и контактные данные.
На этом примере я нарисовал воображаемую сетку
Чтобы увидеть сетку, достаточно мысленно поделить изображение прямыми линиями.
И ещё один пример использования сетки в дизайне.
2. Вертикальная навигация
Мы встречаем левую и правую панель навигации всё реже, т.к. сейчас наметилась тенденция в упрощении меню и перехода на горизонтальный вариант. Однако, вертикальная навигация не исчезнет просто потому, что не всегда горизонтальный вариант так уж универсален. Так, вертикальный вариант удобней для меню со сложной или длинной структурой дерева . Возьмём, к примеру, molotok.ru.
Трудно представить, как все его категории уместятся в горизонтальном меню.
Впрочем, ничто не мешает использовать его и для маленьких сайтов. Если разместить его прямо под лого, оно может неплохо заполнить пустоту.
Хороший простой пример вертикальной навигации
Вертикальное меню расположено слева, под логотипом
3. Горизонтальная навигация
Горизонтальная навигация обычно используется для несложных и не длинных списков ссылок. Очень удобно разместить её над или под логотипом. Кроме своей заметности , горизонтальное меню имеет и ещё один плюс — это экономия места . Вертикальное меню забирает пространство, исходя из длины самого длинного слова. А вот горизонтальное меню «растёт» разве что немного в высоту, да и то всегда можно поиграть margin’ами и padding’ами.
Обычное (с хорошим дизайном) горизонтальное меню
Ещё один пример хорошего оформления горизонтального меню
4. Выпадающие списки
Ещё один, более продвинутый вариант навигации — это выпадающие списки. Зачастую его применяют на страницах, где мало категорий, но они включают подкатегории . Выпадающее меню очень удобно, помогает избежать лишних переходов и экономит место на странице
Элегантное выпадающее меню
Модифицированное меню, добавлено оформление картинками
Выпадающее меню бывает не только горизонтальным, но и вертикальным
5. Хлебные крошки
Хлебные крошки являются визуальным представлением постраничной иерархии сайта. Пользователь должен понимать, в каком разделе сайта он находится, и к какой категории относится страница. Очень удобная вещь, как в плане навигации по сайту , так и как источник дополнительной перелинковки страниц (что любят поисковики , так что популярность этого элемента всё время растёт). Располагают их выше содержимого страницы, слева направо.
Текущая страница выделяется цветом
Текущая страница никак не выделяется. Авторы сыграли на логике посетителя)
Текущая страница никак не выделяется. Зато выделены корневые страницы
6. Список записей
Блоги всё популярней, и у каждого есть список постов, что логично. Каждый такой список состоит из «превьюшек» постов . А «превьюшки» , в свою очередь, из заголовка статьи, краткого содержания, количества комментариев и тому подобной общей информации. Главный акцент мы всегда делаем на названии. Оно должно быть крупным, раскрывающим тему, без лишних слов и содержаться в тегах h1 или h2. «Превьюшка» должна заинтриговать читателя, чтобы у него появился интерес посмотреть пост, полазить по сайту.
В развёрнутом виде отображается только последняя запись, остальные — в виде небольших «превьюшек». Такой вариант экономит место.
Каждая запись оформлена в виде страницы блокнота
7. Архивы
Архивы — очень хороший способ обеспечить доступ к старым записям в блоге. Хороший архив должен содержать сортировку не только по датам, но и по категориям, ведь часто пользователям интересна только одна рубрика блога. К сожалению, не все авторы уделяют этому элементу должного внимания, а зря — архив здорово повышает юзабилити страницы .
Подробный архив, где есть сортировка записей по категориям и тегам
Этот архив включает удобную временную навигацию
Отличный пример, где сочетается архив по датам и по записям
8. Футер с контентом
Времена простеньких футеров, похоже, уходят, и в моду входят футеры красивые и полезные . Туда можно поместить те же архивы, контакты, информацию об авторе (владельце) блога, меню и ещё кучу разной полезной информации. В функции футера вполне может входить привлечение посетителей для просмотра других страниц сайта. Конечно, желательно его красиво оформить. Как вариант, многие используют 3-4 колонки , в которых содержаться внутренние ссылки и информация, а так же подписки на RSS и Email .
Трехколоночный информативный футер
Пример отличного графического оформления футера сайта
Футер с интересным элегантным дизайном
9. Нумерация страниц
Когда на сайте много контента, и это нужно хоть как-то организовать, то нумерация страниц — первое, что приходит в голову. Она позволяет быстро пролистывать контент сайта, заодно снижая время загрузки страницы . Лучший пример навигации страниц, на мой взгляд, реализован примерно следующим образом:
Тут я, наверное, никого не удивил, т.к. эта схема довольно распространена. Здесь чётко выражена текущая страница, её соседи, а также есть доступ сразу к последним (и первым) записям.
Один из самых часто-встречающихся вариантов оформления прокрутки страниц
А вот более интересный вариант оформления
10. Модальные вкладки
Модальные вкладки в компактном виде содержат дополнительный контент, который становится открытым только тогда, когда этого захочет пользователь. Когда возраст блога позволяет ему, например, иметь большой архив с большим количеством тегов и категорий, можно распределить их в несколько вкладок, чтобы они не занимали много места . Разумеется, выводить таким способом можно всё, что угодно, и способы оформления могут быть самыми разными.
На этом примере на каждой новой вкладке — разный тип блюд ресторана
Журнал предлагает выбрать посетителю тот контент, который ему нужен
11. Участвуйте в системе оценок.
Большинство современных сайтов/блогов направлены на взаимодействие с пользователем. И многие стремятся сделать свои странички всё более интерактивными
.
Помещайте на сайт кнопки Stumbleupon / Twitter / Vkontake
и т.д. — и вы увидите, как страницы оживут.
Один из популярных вариантов — массовое добавление иконок социальных закладок в конце статьи
12. Информационная панель
Не столь часто (пока!) встречающаяся вещь, но тоже имеющая право на место в этой статье. Интернет-магазины, интернет-банки, аналитические центры — все эти сервисы имеют на своих сайтах страницы статистической информации. На таких страницах особенно важно донести до посетителя то, что он хочет найти . Дизайн их должен быть простым, хорошо организованным и доходчивым.
Google Analytics — один из самых ярких примеров хорошо сделанной информационной панели.
Ещё один пример хорошего дизайна и юзабилити при работе с данными.
Графики используются и в отображении котировок акций. Это — один из примеров оформления.
13. Простая регистрация
Все мы встречаемся с формой регистрации на сайтах, и многие из нас вынуждены по тем или иным причинам регистрироваться часто. Думаю, все согласятся, что предложение ввести подтверждение e-mail или сложный непонятный текст защиты на 3-й странице формы регистрации нагоняет тоску. Все эти излишества совсем не упрощают жизнь посетителей. Вот почему важна максимально простая форма регистрации
. Пользователь не должен думать, что он что-то забыл вписать, или вглядываться в символы. Если же вам хочется вытянуть максимум информации из пользователя, сделайте так:
Чтобы зарегистрироваться он должен ввести логин, почту и пароль. А после регистрации предложите ему заполнить другие поля анкеты.
Отличный пример просто формы регистрации, хотя и не максимально короткий
На Vimeo размещён вариант самой короткой формы регистрации — всего три(!) поля
Facebook — ещё один пример хорошего исполнения формы
14. Акценты
Оживите свою страницу. Акцентируйте важные слова/фразы. Играйте размером, шрифтом, цветом, оформлением. Ведь первым делом посетитель должен увидеть то, на что вы ему укажите . Правда, немного сложнее заставить его увидеть части страницы в нужном ПОРЯДКЕ. Но и это решаемо.
Важные фрагменты текста выделены бирюзовым цветом
Главная надпись страницы максимально увеличена и написана другим шрифтом
Каждая новая строка «затухает» относительно предыдущей
15. Отображение Коллекций
Многие из нас любят похвастаться своими друзьями, коллекциями картинок, ресурсами, фотографиями и т.д. Чтобы отобразить эти коллекции, используются несколько разных способов.
Кто-то использует сетку из «превьюшек», а кто-то — некий список из картинок.
На этом примере мы видим такое своеобразное отображение дружеских ссылок
Простое и стильное отображение последних работ дизайнера
16. Поиск
На всяком сайте, содержащим много контента, должен быть поиск. Кнопку поиска обычно располагают на видном месте . В шапке, или в вертикальном меню.
Простая и мягкая по тонам форма поиска
Пример необычного оформления формы поиска
И ещё один пример нестандартного оформления нашей формы
17. Формы
Формы на сайтах требуются для того, чтобы оставить комментарий, или чтобы совершить некий платёж. Как и в примере с регистрацией, здесь тоже важна максимальная простота . Ведь пользователи не любят долго копаться с забиванием символов и думать, что куда вписать.
Лучше включить возможность просмотра, на каком этапе заполнения находится пользователь, и сколько ещё осталось до конца. Так же желательно разделять этапы по категориям (общая информация, контакты и т.п.)
На этой странице вы можете наблюдать процесс поэтапного заполнения формы
Ещё один пример поэтапного заполнения формы. Активная стадия выделяется цветом
Другой вариант оформления — активный процесс открывается в новой вкладке
18. Подписки
В то время как блоги и социальные сети набирают популярность, появилась тенденция размещать несколько кнопок подписки. Как правило, минимум это RSS и Twitter. Люди стараются сделать страницы более живыми и коммуникативным, максимально облегчая читателям возможность следить за новостями.
Вместе с кнопками подписки сразу же указано и количество подписчиков
Когда я увидел этот вариант — мне сразу бросился в глаза элегантный дизайн
Максимально простой вариант — лишь кнопки подписки, плюс ссылки на социальные сети
19. Слайдеры
Каждый мало-мальски опытный верстальщик может взять готовый jQuery-слайдер в интернете, и вставить его на свою страницу. И выглядит это весьма эффектно . Именно поэтому слайдеры всё чаще встречаются на страницах. Как правило, их размещают как биллборд с лучшими материалами (или товарами) сайта, в самом видном месте.
Отличный, простой, стильный слайдер.
А это — довольно распространённый пример слайдера
Хороший необычный пример оформления слайдера
На этом, разумеется, элементы не кончаются — ведь их намного больше. Я рассказал лишь о самых трендовых и ходовых. Хочется пожелать всем отнестись к информации серьезно, проанализировать и обдумать. Делайте красивые сайты. Делайте удобные сайты.
С уважением Найко Михайл.
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Октябрь 25, 2019 Запись была обновлена
Юрий Немец
Подборка красивых вкладок - набор красивых вкладок для сайта
Сегодня я предлагаю вашему вниманию подборку красивых и оригинальных вкладок. При создании данных эффектов были использованы псевдо-элементы, изображения SVG и CSS переходы. Дизайн всех вкладок выполнен в современном стиле и подойдет практически для любого сайта. Посмотрите примеры этих вкладок и вы сами удивитесь насколько необычно можно оформить, казалось бы, такой часто используемый элемент на сайте.
Подборка красивых вкладок
Скачать
Подборка красивых вкладок
Если вы смотрели демо версию, то смогли заметить что все примеры находятся на одной странице. Поэтому если вы скачаете и откроете исходники, то увидите длинную страницу как на изображении слева. Не пугайтесь! Там всё красиво структурировано. Вам лишь нужно взять нужный «кусочек» кода и вставить его себе на сайт.
Каждый новый пример расположен в отдельном блоке
Тоже самое обстоит и с файлом стилей. Он также большой но там всё прокомментировано, поэтому проблем возникнуть не должно.
Если кто-то до сих пор не посмотрел демо, то для вас я сделал несколько скриншотов 🙂 :
Вывод
Неплохая подборка вкладок с нестандартными эффектами и переходами. Уделите несколько минут своего времени и посмотрите все вкладки. Бывает так, что смотришь и думаешь: «Ну обычные вкладки, что тут такого. Да и не очень и нужны они мне.». Но один, какой-нибудь необычный, дизайн настолько сильно запоминается, что когда нужно реализовать вкладки на сайте, именно таким образом и хочется их сделать. А где их видел даже и не вспомнишь!
Поэтому не забываем добавлять мой сайт в закладки в браузере (делается это сочетанием клавиш CTRL+D ) 😉 .
Не так давно, мы рассмотрели реализации вкладок (табов) с содержанием, без подключения javascript, используя в работе исключительно стандарты .
Сегодня я хочу познакомить вас, с ещё одним, не менее интересным решением по формированию компактного блока вкладок (табов), построенных на чистом CSS3 и использованием элементов адаптивной вёрстки. Как и в первом варианте, ничего лишнего и громоздкого, самый минимум кода css, и в вашем распоряжении появится адаптивный блок с переключаемыми вкладками, который отлично впишется в любой раздел страницы, будь то отдельное сообщение, боковая колонка, или же модальное окно.
Какие изменения были внесены относительно первого варианта?
Прежде всего, блок вкладок стал адаптивным, т.е. при просмотре на мобильных устройствах, размер вкладок изменяется в зависимости от размеров экранов пользовательских устройств, текст заголовков убирается и остаются только шрифт-иконки, указывающие на смысл содержания той или иной .
Шрифт-иконки прикрутил от , коллекция очень богатая и к тому же абсолютно бесплатна. Вы можете интегрировать иконки в любой проект используя скачанный набор со шрифтами, или же подключить к вашему файлу стилей css напрямую, с сайта разработчика через @import , используя такую строчку:
| @ import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" ) ; |
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
В демонстрационном примере именно так я и сделал, так что взглянув на исходники, легко разберётесь что к чему.
Структура вкладок в Html довольно проста. Базовый div-контейнер, связка
HTML
| < div class = "tabs" > < input id= "tab1" type= "radio" name= "tabs" checked> < label for = "tab1" title= "Вкладка 1" > Вкладка 1 < input id= "tab2" type= "radio" name= "tabs" > < label for = "tab2" title= "Вкладка 2" > Вкладка 2 < input id= "tab3" type= "radio" name= "tabs" > < label for = "tab3" title= "Вкладка 3" > Вкладка 3 < input id= "tab4" type= "radio" name= "tabs" > < label for = "tab4" title= "Вкладка 4" > Вкладка 4 < section id= "content-tab1" > < p> < section id= "content-tab2" > < p> < section id= "content-tab3" > < p> Здесь размещаете любое содержание.... < section id= "content-tab4" > < p> Здесь размещаете любое содержание.... |
Для организации блоков с содержанием я использовал тег .
Переключение вкладок происходит посредством взаимодействия атрибута checked в теге и псевдокласса:checked , прочно связанными через идентификаторы в CSS. В обработке такого метода и спотыкается старенький, знаменитый тормоз прогресса Internet Explorer 8, с 9-й версии всё работает в лучшем виде.
Плавно мы подошли к самому интересному, к формированию стилей наших вкладок с помощью магии CSS. Здесь дела обстоят ещё проще, особо расписывать каждое свойство и параметры смысла нет, в исходниках прописал некоторые пояснения, так что думаю разобраться что куда и зачем, труда не составит, а возникнут вопросы, или обнаружите ошибку, пишите в комментариях, обязательно отвечу, и помогу.
CSS3
| /* Базовый контейнер табов */ . tabs { min- width: 320px; max- width: 800px; padding: 0px; margin: 0 auto; } /* Стили секций с содержанием */ . tabs> section { display: none; padding: 15px; background: #fff; border: 1px solid #ddd; } . tabs> section> p { margin: 0 0 5px; line- height: 1.5 ; color: #383838; /* прикрутим анимацию */ - webkit- animation- duration: 1s; animation- duration: 1s; - webkit- animation- fill- mode: both; animation- fill- mode: both; - webkit- animation- name: fadeIn; animation- name: fadeIn; } /* Описываем анимацию свойства opacity */ @- webkit- keyframes fadeIn { from { opacity: 0 ; } to { opacity: 1 ; } } @ keyframes fadeIn { from { opacity: 0 ; } to { opacity: 1 ; } } /* Прячем чекбоксы */ . tabs> input { display: none; position: absolute; } /* Стили переключателей вкладок (табов) */ . tabs> label { display: inline- block; margin: 0 0 - 1px; padding: 15px 25px; font- weight: 600 ; text- align: center; color: #aaa; border: 0px solid #ddd; border- width: 1px 1px 1px 1px; background: #f1f1f1; border- radius: 3px 3px 0 0 ; } /* Шрифт-иконки от Font Awesome в формате Unicode */ . tabs> label: before { font- family: fontawesome; font- weight: normal; margin- right: 10px; } . tabs> label[ for *= "1" ] : before { content: "\f 19a" ; } . tabs> label[ for *= "2" ] : before { content: "\f 17a" ; } . tabs> label[ for *= "3" ] : before { content: "\f 13b" ; } . tabs> label[ for *= "4" ] : before { content: "\f 13c" ; } /* Изменения стиля переключателей вкладок при наведении */ . tabs> label: hover { color: #888; cursor: pointer; } /* Стили для активной вкладки */ . tabs> input: checked+ label { color: #555; border- top: 1px solid #009933; border- bottom: 1px solid #fff; background: #fff; } /* Активация секций с помощью псевдокласса:checked */ #tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 { display: block; } /* Убираем текст с переключателей * и оставляем иконки на малых экранах */ @ media screen and (max- width: 680px) { . tabs> label { font- size: 0 ; } . tabs> label: before { margin: 0 ; font- size: 18px; } } /* Изменяем внутренние отступы * переключателей для малых экранов */ @ media screen and (max- width: 400px) { . tabs> label { padding: 15px; } } |
/* Базовый контейнер табов */ .tabs { min-width: 320px; max-width: 800px; padding: 0px; margin: 0 auto; } /* Стили секций с содержанием */ .tabs>section { display: none; padding: 15px; background: #fff; border: 1px solid #ddd; } .tabs>section>p { margin: 0 0 5px; line-height: 1.5; color: #383838; /* прикрутим анимацию */ -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeIn; animation-name: fadeIn; } /* Описываем анимацию свойства opacity */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Прячем чекбоксы */ .tabs>input { display: none; position: absolute; } /* Стили переключателей вкладок (табов) */ .tabs>label { display: inline-block; margin: 0 0 -1px; padding: 15px 25px; font-weight: 600; text-align: center; color: #aaa; border: 0px solid #ddd; border-width: 1px 1px 1px 1px; background: #f1f1f1; border-radius: 3px 3px 0 0; } /* Шрифт-иконки от Font Awesome в формате Unicode */ .tabs>label:before { font-family: fontawesome; font-weight: normal; margin-right: 10px; } .tabs>label:before { content: "\f19a"; } .tabs>label:before { content: "\f17a"; } .tabs>label:before { content: "\f13b"; } .tabs>label:before { content: "\f13c"; } /* Изменения стиля переключателей вкладок при наведении */ .tabs>label:hover { color: #888; cursor: pointer; } /* Стили для активной вкладки */ .tabs>input:checked+label { color: #555; border-top: 1px solid #009933; border-bottom: 1px solid #fff; background: #fff; } /* Активация секций с помощью псевдокласса:checked */ #tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 { display: block; } /* Убираем текст с переключателей * и оставляем иконки на малых экранах */ @media screen and (max-width: 680px) { .tabs>label { font-size: 0; } .tabs>label:before { margin: 0; font-size: 18px; } } /* Изменяем внутренние отступы * переключателей для малых экранов */ @media screen and (max-width: 400px) { .tabs>label { padding: 15px; } }
Оформить вкладки () вы можете как угодно, всё что в примере, это только пример, моё сиюминутное видение продукта, ничего больше. Значения Unicode нужных вам шрифт-иконок, сможете узнать на сайте разработчика, для этого просто нажмите на выбранную иконку и скопируйте выданный цифровой код, примерно такого вида: \f13b .
Обратите внимание, когда вы уменьшаете размер окна браузера, вкладки автоматом подстраиваются под текущий размер до определённого значения (в примере 680px), после этого значения, текстовые заголовки вкладок исчезают, остаются иконки. Тем самым достигается максимальная компактность всего блока вкладок, остаётся лишь правильно подобрать эти самые иконки, подходящие по смыслу представленному контенту внутри вкладок.
Смотрите живой пример работы вкладок (табов), скачивайте исходники, экспериментируйте с параметрами, и творите, творите, творите...
Если вы устали работать с англоязычными шаблонами и мечтаете о шансе пользоваться русифицированными шаблонами, то вы определенно обрадуетесь одной отличной новости. На маркетплейсе TemplateMonster появились те самые готовые решения, которые вам нужны. Да-да, на сайте теперь можно ознакомиться с лучшими . Локализованные шаблоны — это именно то, что нужно, если вы хотите построить свой онлайн-проект за минимальное количество времени. Кроме того, что тексты для шаблонов писались вручную, они обладают всеми необходимыми инструментами для создания профессионального сайта.
С Уважением, Андрей
Здравствуйте, уважаемые читатели . В этот, такой морозный день мы будем делать с Вами красивые табы с помощью CSS и JQuery . Оказывается, что эти, так называемые, табы очень полезны для сайта в целом, они позволяют существенно сэкономить место на странице. Их можно разместить везде, в сайдбаре, или не посредственно, в самом контенте, статье.
Так же, табы, которые мы будем делать, красивого дезайна, они существенно украсят Ваш сайт. Во как:-) красиво и полезно, мне кажется редкое совпадение. Тем более делаются они только при помощи , соответственно: быстро загружаются, и не несут никакой нагрузки на сервер.
JQuery
$(document).ready(function() { $("#content div").hide(); // Скрытое содержимое $("#tabs li:first").attr("id","current"); // Какой таб показать первым $("#content div:first").fadeIn(); // Показ первого контента таба $("#tabs a").click(function(e) { e.preventDefault(); $("#content div").hide(); //Скрыть всё содержимое $("#tabs li").attr("id",""); //Сброс идентификаторов $(this).parent().attr("id","current"); // Активация идентификаторов $("#" + $(this).attr("title")).fadeIn(); // Показать содержимое текущей вкладки }); })();Вот в принципе и всё, Вы главное экспериментируйте, В данные вкладки можно добавить фоновые изображения, которые существенно предадут им вида, только вот загружаться они будут дольше.
Совместимость с браузерами
Эти табы поддерживают практически все браузеры, только в некоторых они будут выглядеть чуть по другому, потому что многие, ещё пока, не поддерживают CSS3.
Вот и всё, надеюсь Вам понравилось:-) Если что то Вам будет не понятно обязательно спрашивайте в комментариях. До скорых встреч.
В прошлых статьях вы научились делать вкладки для сайта на и . И разобрались, как социальных сетей.
Но порой требуется сделать самую простую вкладку с помощью связки html и css и разместить ее в любом месте страницы сайта независимо от того, какую cms используете.
В такой вкладке можно разместить любой контент или код. И для этого не придется подключать никаких дополнительных библиотек и скриптов – голые Html и css.
Пример html css вкладки на странице:
Создание вкладки html
1 шаг. Для табов пишем простой код:
Содержимое вкладки 1
Содержимое вкладки 2
Содержимое вкладки 3
Содержимое вкладки 4
Создание css для новой html вкладки
2 шаг. Пишем стили для внешнего оформления.
В стилях можно менять что угодно и как угодно. В этом примере прописаны закругленные углы у табов. Если вам это не нужно, то просто удалите этот блок.
/* CSS Document */ .tabs { opacity: 0; visibility: hidden; } .tab{ position:absolute; visibility: hidden; z-index: 10; color:#000; font: bold 9pt arial; } .tabs:target+.tab { opacity: 1; visibility: visible; } .tabsLink a{ background-color:#F06406; padding:2px; font: bold 10pt arial; color:#fff; text-decoration:none; /* Начало закругленные табы */ -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; /* Конец закругленные табы */ }
Как видите, вариантов создания обычных вкладок для скрытия контента в неактивных табах много. И это самый простой, делается за 5 минут.