Как сделать вкладки (табы, 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 (если у вас она подключена, пропустите данный пункт):
1 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
2. Добавляем CSS код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | .tabs{ display:inline-block; } .tabs > div{ padding-top:10px; } .tabs ul{ margin:0px; padding:0px; } .tabs ul:after{ content:""; display:block; clear:both; height:5px; background:#46c765; } .tabs ul li{ margin:0px; padding:0px; cursor:pointer; display:block; float:left; padding:10px 15px; background:#e9eaeb; color:#707070; } .tabs ul li.active, .tabs ul li.active:hover{ background:#46c765; color:#fff; } .tabs ul li:hover{ background:#d6d6d7; } |
3. HTML код в теги body:
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="tabs"> <ul> <li>Первая вкладка</li> <li>Вторая вкладка</li> <li>Третья вкладка</li> </ul> <div> <div>Первое содержимое</div> <div>Второе содержимое</div> <div>Третье содержимое</div> </div> </div> |
4. В конце (перед закрывающимся тегом body) вставляем javascript код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script type="text/javascript"> $(document).ready(function(){ $(".tabs").lightTabs(); }); (function($){ jQuery.fn.lightTabs = function(options){ var createTabs = function(){ tabs = this; i = 0; showPage = function(i){ $(tabs).children("div").children("div").hide(); $(tabs).children("div").children("div").eq(i).show(); $(tabs).children("ul").children("li").removeClass("active"); $(tabs).children("ul").children("li").eq(i).addClass("active"); } showPage(0); $(tabs).children("ul").children("li").each(function(index, element){ $(element).attr("data-page", i); i++; }); $(tabs).children("ul").children("li").click(function(){ showPage(parseInt($(this).attr("data-page"))); }); }; return this.each(createTabs); }; })(jQuery); </script> |
Готово, теперь у вас есть простые в установке, использовании табы для сайта.
Добавить комментарий