Как сделать вкладки (табы, tabs) на сайте

11.04.2016

Как сделать вкладки (табы, tabs) на сайте? Очень просто, ниже вы найдете подробную инструкцию как правильно сделать табы. За частую они используются в интернет магазинах, когда нужно вывести характеристики, фото, описание в отдельных вкладках. И так, приступим к созданию вкладок:

 

[button title=»DEMO» icon=»» icon_position=»» link=»//di-grand.com/blog/html/tabs.html» target=»_blank» color=»» font_color=»» size=»2″ full_width=»» class=»» download=»» onclick=»»]
[content_link title=»Скачать» icon=»icon-attach» link=»/blog/files/tabs.rar» target=»_blank» class=»» download=»tabs.rar»]

1. В теги head добавляем подключение библиотеки Jquery (если у вас она подключена, пропустите данный пункт):

2. Добавляем CSS код:

3. HTML код в теги body:

4. В конце (перед закрывающимся тегом body) вставляем javascript код:

 

Готово, теперь у вас есть простые в установке, использовании табы для сайта.

Добавить комментарий

Ваш e-mail не будет опубликован.