Как сделать вкладки-табы для сайта на jQuery

Начинаем, как всегда, со структуры HTML: кладем заготовку будущих табов в блок-обертку с id=wr-tabs, далее в ней добавляем блок tabs – в нём будут находиться наши вкладки, и блок content – сюда кладем блоки с выводимым контентом.

<div id="wr-tabs">
    <div class="tabs">
      <div class="tab active">Вкладка №1</div>
      <div class="tab">Вкладка №2</div>
     <div class="tab">Вкладка №3</div>
     <div class="tab">Вкладка №4</div>
 </div>
    <div class="content">
       <div class="tab-cont active">
           Контент №1
      </div>
        <div class="tab-cont">
          Контент №2
      </div>
        <div class="tab-cont">
          Контент №3
      </div>
        <div class="tab-cont">
          Контент №4 
     </div>
    </div>
</div>

Переходим к CSS стилям наших вкладок.

Тут главное указать для активного блока с контентом свойство display со значением block, а для активной вкладки - такой же стиль, как и при наведении.

#wr-tabs{
   width: 700px;
   margin: 40px auto 0;
}
   #wr-tabs .tabs{
     background-color: #fff;
     margin-bottom: 3px;
 }
   #wr-tabs .tabs:after{
       content: "";
      display: block;
     clear: both;
        height: 0;
  }
       #wr-tabs .tabs .tab{
            float: left;
            cursor: pointer;
            border-right: 1px solid #f2f4f9;
            padding: 10px 20px;
     }
       #wr-tabs .tabs .tab:last-child{
         border-right: none;
     }
       #wr-tabs .tabs .tab:hover,
      #wr-tabs .tabs .tab.active{
         background-color: #c7e7f9;
          color: #1d7ee4;
     }
   #wr-tabs .content{
      background-color: #fff;
 }
       #wr-tabs .content .tab-cont{
            display: none;
          padding: 15px 10px;
     }
       #wr-tabs .content .tab-cont.active{
         display: block;
     }

Так как для вкладок мы используем библиотеку jQuery, скрипт получается очень коротким, и, по вашему желанию, может быть легко усложнен различными визуальными эффектами, легко реализуемыми при помощи этой библиотеки.

$(function(){

  $("#wr-tabs").on("click", ".tab", function(){

     var tabs = $("#wr-tabs .tab"),
            cont = $("#wr-tabs .tab-cont");

       // Удаляем классы active
        tabs.removeClass("active");
       cont.removeClass("active");
       // Добавляем классы active
      $(this).addClass("active");
       cont.eq($(this).index()).addClass("active");

      return false;
   });
});

Принцип работы скрипта заключается в отслеживании клика по вкладке (div с классом tab). При совершении данного события в переменные tabs и cont будут сохраняться выборки всех блоков вкладок и всех блоков с контентом. После чего у всех элементов удаляется класс active (сделано это для удобства, чтобы не отслеживать наличие данного класса у элементов по отдельности) и добавляется той вкладке, по которой кликнули. Вместе с ней дописывается класс active соответствующему ей блоку с контентом.

Готово!