Каждый хочет на сайте повысить функционал и уменьшить занимаемое место информации в окне, а с этим могут отлично справиться вкладки Jquery и достаточно быстро. Реализовать их можно различными способами, но самый актуальный это тот, который будет описан здесь(хотя на вкус и цвет..). Для начала давайте посмотрим готовый пример:
demo
Для создания вкладок нам понадобится привычная связка HTML+CSS+Javascript. Только здесь я опишу пример с использованием библиотеки Jquery, потому как она реально сокращает код, который был бы написан на Javascript и наверняка подключена у вас, если используются другие скрипты или плагины галереи и т.д.
HTML
Раземтка текстового документа у нас начнется с контейнера в котором будут размещены блоки с навигацией и блоки контента, отвечающие им.
<!-- меню вкладок --> <ul class="tab-links"> <li class="active"><a href="#tab1">Первая</a></li> <li><a href="#tab2">Вторая</a></li> <li><a href="#tab3">Третья</a></li> <li><a href="#tab4">Четвертая</a></li> </ul> <!-- контент вкладок --> <div class="tab-content"> <div id="tab1" class="tab active"> <p><b>Вкладка №1</b></p> <p>Пример первой вкладки.</p> </div> <div id="tab2" class="tab"> <p><b>Вкладка №2</b></p> <p>Пример второй вкладки.</p> </div> <div id="tab3" class="tab"> <p><b>Вкладка №3</b></p> <p>Пример третьей вкладки.</p> </div> <div id="tab4" class="tab"> <p><b>Вкладка №4</b></p> <p>Пример четвертой вкладки.</p> </div> </div>
CSS
Теперь нам необходимо преобразить то, что было создано, а также позаботиться о выделенных объектах. Все в деталях мы не будем рассматривать, потому как это креативный процесс и каждый придумает сам, как он хочет оформить дизайн. Самое основное, что необходимо отметить, так это класс, который будет отвечать за активную вкладку. По выше указанному примеру у нас этот класс будет active
. Поэтому ему мы можем дать другой background
, отличающийся от своих соседей и соответственно поменять значение color
. Но это далеко не все, что можно будет применить к активному элементу.
/* стили ко всем вкладкам меню */ .tab-links a { padding: 9px 15px; display: inline-block; background: rgba(0, 0, 0, 0.8); font-size: 16px; font-weight: 600; color: white; transition: all linear 0.5s; text-decoration: none; text-transform: uppercase; } /* класс активной вкладки меню */ li.active a, li.active a:hover { background: rgba(255, 0, 0, 0.8); color: white; }
Jquery
А вот и изюминка всего рабочего процесса. Мы будем по готовности документа вешать обработчик событий по клику на одну из вкладок меню, а согласно клику, будем получать значение href
этого элемента и передавать его значение контенту с аналогичным id
, тем самым активируя его, а соседей скрывать.
$(document).ready(function() { $('.tabs .tab-links a').click(function(e) { var currentAttrValue = $(this).attr('href'); //активируем необходимую вкладку и скрываем остальные $('.tabs ' + currentAttrValue).fadeIn(500).siblings().hide(); // добавляем и удаляем класс active для необходимого пункта меню $(this).parent('li').addClass('active').siblings().removeClass('active'); e.preventDefault(); }); });
Реализация через Javascript
Того же результата можно было бы добиться и посредством чистого JS. Для этого мы могли бы повестить на каждый пункт меню свою функцию, которая активировала бы соответствующий контент согласно имеющемуся в атрибуте значению. Принцип реализации аналогичен, просто код выглядит в каждом случае по-разному. Вот пример такого решения с функцией:
function selectTab(tab, content) { document.getElementById('first').style.display = 'none'; document.getElementById('second').style.display = 'none'; document.getElementById(content).style.display = 'block'; document.getElementById('tab_1').className = ''; document.getElementById('tab_2').className = ''; document.getElementById(tab).className = 'active'; } <!-- html --> <ul> <li><a href="javascript:selectTab('tab_1', 'first');" id="first" class="active">Первая</a></li> <li><a href="javascript:selectTab('tab_2', 'second');" id="second">Вторая</a></li> </ul> <div id="content_1"></div> <div id="content_2" style="display:none;"></div>
Но данная реализация совсем проста и не целесообразна, потому как будет увеличиваться при каждом добавлении вкладки все больше и больше объем кода. Гораздо актуальнее здесь повесить обработчик клика на блок меню, где мы будем определять был ли клик по ссылке, если нам вернуло правильный элемент, а именно A
, то мы берем его атрибут href
и используем для активации контента с аналогичным id
, а всех соседей скрываем. Такой код будет универсальным, а выше указанный просто нашел в интернете. Тратить время на написание универсального кода не буду, потому как выше более быстрый и кроссбраузерный вариант на jq, хотя идею я вам подал.
не скупись

Полезная фича, спасибо
Кстати как по мне новый дизайн не очень) Прошлый нравился больше)
Но это сугубо мое мнение)
Bogutskiy, мне просто надоели все одинаковые на вид блоги. Решил без всяких излишеств, того и добился — простоты и функционала.
Спасибо, код сохранил-))
seoonly.ru, рад, что помог