Опубликовано в jQuery
В этом примере мы реализуем с помощью jQuery и CSS очень полезный приём который часто можно встретить на сайтах, это вкладки между которыми можно переключаться.
Шаг -1 Начнём с HTML
Для меню вкладок используем неупорядоченный список, далее создаём контейнер div с классом tab_container и в нём ещё два div контейнера, id у которых такие же как и атрибут у href в списке вкладок.
- Галерея/a>
- Контакты‹
Normal 0 false false false RU X-NONE X-NONE
Шаг-2 CSS
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Устоновка высоты вкладок--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px; /*--Вертикальное выравнивание текста на вкладке--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Вытягивание списка вниз на 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*-- Normal 0 false false false RU X-NONE X-NONE Белая граница в 1px внутри неактивного элемента списка--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*-- Normal 0 false false false RU X-NONE X-NONE Проверяем
активность вкладки, делаем не восприимчивой к наведению--*/
background: #fff;
border-bottom: 1px solid #fff; /*-- Normal 0 false false false RU X-NONE X-NONE Закрываем
нижнюю границу, создаём видимость соединения с контентом--*/
}
.tab_container {/*- Normal 0 false false false RU X-NONE X-NONE Стили контента вкладок --*/
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
Шаг -3
Теперь jQuery
$(document).ready(function() {
// Normal 0 false false false RU X-NONE X-NONE Когда страница загружается......
$(".tab_content").hide(); // Normal 0 false false false RU X-NONE X-NONE Скрыть весь контент
$("ul.tabs li:first").addClass("active").show(); // Normal 0 false false false RU X-NONE X-NONE Активировать первую вкладку
$(".tab_content:first").show(); // Normal 0 false false false RU X-NONE X-NONE Показать контент первой вкладку
//Событие по клику
Normal 0 false false false RU X-NONE X-NONE $("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Удаление любого "active"
класса
$(this).addClass("active"); // Normal 0 false false false RU X-NONE X-NONE Добавление
"active" класса на активную вкладку
$(".tab_content").hide(); // Normal 0 false false false RU X-NONE X-NONE Скрыть
контент вкладок
var activeTab = $(this).find("a").attr("href"); // Normal 0 false false false RU X-NONE X-NONE Найти
href значение атрибута для выявления активной вкладки и контента $(activeTab).fadeIn();
return false;
});
});
Исходник
