Як створити прості таби на jquery з автосменой активного таба, роман Середенко - фріланс

Для вирішення даного завдання нам, для початку, необхідно створити таку структуру:

Клас .tabs-navigation служить контейнером для заголовків табів. А клас .tabs-container (як видно з назви) буде контейнером для утримання самих табів. Як ви вже встигли помітити є відповідність між значеннями атрибутів href тегів <а> в .tabs-navigation і значенням атрибутів id блоків з контеном для табів в контейнері .tabs-container. Саме це і пов'язує заголовок таба з його вмістом.

Тепер спробуємо трохи стилізувати дану структуру.

Слід зазначити, що стилі в даному випадку не грають велику роль і ви можете експериментувати з ними як завгодно.

А тепер, найголовніше, код який призведе таби в робочий стан.

Тут, спочатку ми ховаємо все контейнери для табів крім першого. Потім прикріплюємо подія миші click на заголовки табів, в функції для цієї події ми спочатку ховаємо все таби (рядок 7), показуємо тільки таб пов'язаний з поточним заголовком (рядок 8), ставимо клас selected зі старого на заголовок поточного активного таба (рядки 9- 10).

Не забудьте, також, включити і саму бібліотеку jQuery. Це можна зробити наступним чином:

Для того, щоб активний таб змінювався автоматично через який-небудь інтервал, нам слід трохи доповнити наш код.

У рядку 22 ми спочатку відзначаємо останній таб, додавши до його контейнеру клас .last. Потім встановлюємо нескінченне интервальное виконання функції pressNextTab через кожні 5 секунд (рядок 23). У цій функції ми перевіряємо чи не є поточний таб останнім (для цього ми і додали до нього клас .last) і в залежності від цього активізуємо подія click на першому або наступному по відношенні до поточного табу.

Ось так, досить просто ми зробили таби на jQuery з автоматичною зміною активного таба.

Сторінку з робочими табами можете подивитися тут.