Как сделать вкладки (табы, tabs) на сайте? Очень просто, ниже вы найдете подробную инструкцию как правильно сделать табы. За частую они используются в интернет магазинах, когда нужно вывести характеристики, фото, описание в отдельных вкладках. И так, приступим к созданию вкладок:
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> |
Готово, теперь у вас есть простые в установке, использовании табы для сайта.
Добавить комментарий