Анимированные вкладки на JavaScript

В данном уроке Вы увидите, как можно сделать анимированные вкладки без использования сторонних библиотек. Начнем мы конечно же с структуры объектов HTML. Состоит она из двух основных частей (переключатели и вкладки):

<div id="tabs-wrap">

<ul id="tabs-head">
<li class="active" data-tab="#first">Первый</li>
<li data-tab="#second">Второй</li>
<li data-tab="#third">Третий</li>
</ul>

<ul id="tabs-body">
<li id="first" class="active"></li> 
<li id="second"></li>
<li id="third"></li>
</ul>

</div>

Стили переключателей не несут никакой функциональности, так что их можно оформлять «по вкусу». В стилях же вкладок, есть моменты, которые играют важную роль в переключении. Все из вкладок по умолчанию не отображаются.

Увидеть можно только активную вкладку. Все изменения происходят за счет переопределения значения свойства display путем использования вспомогательного класса «active». Код приведен ниже.

#tabs-body li{
         display:none;
}

#tabs-body li.active{
         display:block;
}

Теперь приступим к написанию JavaScript кода. Для начала создадим несколько функций эмулирующих знакомые большинству функции из jQuery ($ и each), необходимых исключительно для удобства работы с DOM элементами:

var $ = document.querySelectorAll.bind(document); 

Object.prototype.each = function(func){
         for(var i=0; i < this.length; i++){
                  func(i, this[i]);
         }
};

Кроме этого, дополнительно подключим функции по работе с cookie из урока сохрание Cookie JavaScript для сохранения состояния вкладок. Благодаря объявленным выше функциям, следующий код выглядит достаточно понятным для тех, чьи познания в js ограничиваются одним лишь  jQuery:

$("#tabs-head li").each(function(index, element){
         element.onclick = function(event){
                  // Сохранение в  cookie  id текущей вкладки
                   setCookie("activeTab", this.getAttribute("data-tab"), {expires: 14});

                   $("#tabs-head li").each(function(index, element){
                            element.className = '';
                   });
                   this.className = "active";
                   // Функция с реализацией анимации перехода между вкладок

                   tabChange($(this.getAttribute("data-tab"))[0], $("#tabs-body>li.active")[0]);
         }
});

Для создания анимации я использовал функцию requestAnimationFrame, и поскольку в ранних версиях некоторых браузеров ее названия могут быть разными, я создал указатель на ту, которая существует следующим образом:

var raf = window.requestAnimationFrame || 
window.mozRequestAnimationFrame || 
window.webkitRequestAnimationFrame || 
window.msRequestAnimationFrame;

Ниже представлена функция, которая описывает переключение между вкладками:

function tabChange(newTab, oldTab){
         var i = 0;
// Увеличивая или уменьшая значение данной переменной можно
// соответственно увеличить/уменьшить продолжительность анимации
         var k = 50

         function show(){
                   newTab.style.opacity = ++i/k;
                   if (i < k) {
                   raf(show);
                   }
         }

         oldTab.style.opacity = 0;

         oldTab.className = '';
         newTab.className = "active";

         raf(show);
}

Последним шагом в данном уроке будет функция «выгрузки» состояния вкладок из cookie:

function setActive(){
         var activeId = getCookie("activeTab")

         if(typeof activeId !== "undefined"){
                   $("#tabs-head>li.active")[0].className = "";
                   $("#tabs-body>li.active")[0].className = "";
 
                   $(activeId)[0].className = "active";
                   $("#tabs-head>li[data-tab="" + activeId + """)[0].className = "active";
         }
}

Есть еще чем то похожий урок на тему JQuery закладки, там тоже происходит все анимированно. На этом все, урок окончен. Благодарю за Ваше внимание!