Красиві таби на jquery.

Всім привіт. У цій статті я покажу, як створити красиві таби на JQuery за допомогою невеликого плагіна.

Отже, для початку зайдіть за посиланням: https://github.com/aarondo/tabulous.js І скачайте ZIP архів. Там ви знайдете необхідні стилі і скрипти, які, до речі, давайте підключимо в нашому html файлі

 
href=`Tabulous.css`rel=`Stylesheet`type=`Text / css`gt;

У самому ж документі потрібно створити структуру наступного вигляду:

Відео: Виберіть на Jquery # 1

id="Tabs"gt; 
 
href="# Tabs-1"title=""gt;перший таб 
href="# Tabs-2"title=""gt;другий таб 
href="# Tabs-3"title=""gt;третій таб 
 
id="Tabs_container"gt; 
id="Tabs-1"gt; 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, officiis, hic, optio, quis provident fugiat modi vero suscipit tenetur deleniti dolor dignissimos illo exercitationem quidem ratione nobis voluptatem expedita quos. 
 
 
id="Tabs-2"gt; 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, officiis, hic, optio, quis provident fugiat modi vero suscipit tenetur deleniti dolor dignissimos illo exercitationem quidem ratione nobis voluptatem expedita quos. 
 
 
id="Tabs-3"gt; 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, officiis, hic, optio, quis provident fugiat modi vero suscipit tenetur deleniti dolor dignissimos illo exercitationem quidem ratione nobis voluptatem expedita quos.

Думаю, розібратися в структурі вам не складе труднощів. У нас є посилання, які посилаються на ідентифікатор якогось окремого таба, де всередині ми можемо писати що завгодно. Щоб додати новий таб, додайте div з id і посилання, яка буде посилатися на цей ідентифікатор.

Тепер нам залишилося додати скрипт:

Тут ми просто відбираємо div з id = tab і викликаємо для нього метод tabulous, куди передаємо об`єкт, який може приймати лише один параметр - ефект. Значення можуть бути наступні: scale, slideLeft, scaleUp і flip. Ви можете поексперементувати і подивитися, який ефект вам подобається більше.