Web — мастер

В этом примере мы реализуем с помощью jQuery и CSS  очень полезный приём который часто можно встретить на сайтах, это вкладки между которыми можно переключаться.

Шаг -1 Начнём  с HTML

Для меню вкладок используем неупорядоченный список, далее создаём контейнер div с классом tab_container и в нём ещё два div контейнера, id у которых такие же как и атрибут у href в списке вкладок.

• Галерея/a>
• Контакты‹

Шаг-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; /*-     -

Белая граница в 1px внутри неактивного элемента списка--*/
 outline: none;
}
ul.tabs li a:hover {
       background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--

Проверяем
 активность  вкладки, делаем не восприимчивой к наведению--*/
 background: #fff;
 border-bottom: 1px solid #fff; /*--

Закрываем
нижнюю границу, создаём видимость соединения с контентом--*/
}
.tab_container {/*-

Стили контента вкладок --*/
        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() {
       //

Когда страница загружается......
    $(".tab_content").hide(); //

Скрыть весь контент 
       $("ul.tabs li:first").addClass("active").show(); //

Активировать первую вкладку
       $(".tab_content:first").show(); //

Показать контент первой вкладку
       //Событие по клику

       $("ul.tabs li").click(function() {
 
 $("ul.tabs li").removeClass("active"); //Удаление любого "active"
 класса 
$(this).addClass("active"); // 

Добавление
"active" класса на активную вкладку 
$(".tab_content").hide(); //

Скрыть
контент вкладок
 
 var activeTab = $(this).find("a").attr("href"); //

Найти
href значение атрибута для выявления активной вкладки и контента $(activeTab).fadeIn();  
   return false;
      });
 
});
 

Исходник