Приветствую всех читателей этого блога! Сегодня я расскажу о том, как можно сделать простые и “легкие” вкладки (tabs) для вашего сайта.
Вкладки – это очень удобные элементы веб-ресурса, так как они экономят время, улучшают юзабилити, да и в качестве элементов дизайна их тоже нередко используют.
Давайте рассмотрим основные особенности табов и разберем код на javascript.
Основные особенности
Во-первых вкладки будут реагировать не только на клик мыши, но и на наведение (то есть для смены вкладки достаточно навести курсор мыши) .
Во-вторых, наши вкладки будут автоматически изменяться свой размер в зависимости от названия (длины названия) разделов.
Это значит, что если вам нужно будет сменить название какого-нибудь раздела, то вам не нужно будет изменять список стилей (сss) – размеры автоматически будут настроены.
В-третьих название Активной (текущей, выбранной) вкладки будет “подсвечено” с помощью белой рамки.
Разберем код..
Каждую строчку кода разбирать не будем, исходя из комментариев все должно быть понятно, разберем некоторые только некоторые моменты.
В коде имеются две основные функции, первая из которых: setting() – соответственно эта функция отвечает за первоначальные настройки, а именно:
- Выборка элементов по id (вкладок, блоков)
- Присвоение табам их названия
- Вычисление новых размеров div блоков
- Изменение размеров блоков
Данная функция вызывается в момент загрузки страницы, а именно элемента body:
<body onload=”setting()”>
Идем далее..
show_tab – эта функция отвечает за показ нужных вкладок и срабатывает при наведении мыли либо по клику.
У нее имеется параметр num – это номер текущей табы, он проверяется при вызове функции и если он равен номеру текущей вкладки (то есть мы навели на уже выбранную, активную вкладку), то ничего не происходит, иначе, тот блок, который мы выбрали, становится видимым, а два других исчезают (становятся невидимыми.)
Также, переменной, отвечающей за текущий таб, присваивается значение переданного параметра:
curent_tab = num;
Можно взглянуть на пример работы вышеописанного алгоритма, а также скачать html страницу данного примера.
Demo пример вкладок
Скачать пример
На этом все, надеюсь вы найдете им применение, пока!
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.
Здравствуйте! Скажите, пожалуйста, как изменить цвет табов на зеленый? И как установить их на Юкоз? Заранее спасибо.
Здравствуйте, чтобы изменить цвет на зеленый, можно к каждому табу прописать фон и убрать класс – myButton, например, заменив это: Автомобили На это: Автомобили И так для каждого таба. Для установки на юкоз необходимо скопировать код из примера и вставить его в место, где должны выводиться табы – скопировать начиная от: И заканчивая последним: