Вариант табов №1 – адаптивные табы с нумерацией
Веб-страницы часто содержат множество информации, которые могут быть организованы в разные категории и разбиты на различные вкладки для более удобной навигации. В этой статье мы расскажем, как установить табы на свой сайт с помощью jQuery.Данные табы имеют функционал подсчета и добавляют клас предыдущему перед активным табом вкладке. Ето сделано для того, что бы отключать разделители. Можно использовать и для других целей.See the Pen Адаптивные вкладки (табы) на сайте с нумерацией by Tom Johnson (@OwlThemes) on CodePen.
Шаг 1: Подключите библиотеку jQuery к вашему сайту Перед использованием табов на вашем сайте, убедитесь, что библиотека jQuery подключена к вашей странице. Для этого, добавьте следующий код в секцию head вашего HTML-документа:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>Шаг 2. Добавляем CSS код:
.tabs .tabs_content {padding:30px;background: #FFFFFF;border-radius: 0px 30px 30px 30px;min-height: 300px;width: 100%;box-shadow: 0px 4px 40px rgba(0, 43, 60, 0.04);z-index: 1;position: relative;} .tabs ul{margin:0px;padding:0px;display: inline-flex;background: #F2F4F4;border-radius: 20px 20px 0 0;/* box-shadow: 0px 4px 40px rgba(0, 43, 60, 0.04); */z-index: 2;/* font-variant: proportional-nums; */position: relative;} .tabs ul li:before {content: "";position: absolute;top: 19px;right: 0;width: 1px;height: 24px;background-color: #d5d5d5;} .tabs ul li:last-child:before { content: ''; display: none;} .tabs ul .prev:before {display: none;} .tabs ul li{position: relative;display: block;padding: 18px 23px;background: #f4f4f4;border-radius: 30px 30px 0 0;text-align: center;color: #AAABAB;font-size: 17px;border: 0;} .tabs ul li.active:before { content: ''; display: none;} .tabs ul li.active, .tabs ul li.active:hover{background-color: #fff; color: #191919;} .tabs ul li:hover{ color: #191919;cursor: pointer;}Шаг 3. После подключения стилей, следующий шаг – добавление HTML-разметки на страницу, где будут размещены табы
<div class="tabs"> <ul> <li>Первая вкладка</li> <li>Вторая вкладка</li> <li>Третья вкладка</li> </ul> <div> <div>Первое содержимое</div> <div>Второе содержимое</div> <div>Третье содержимое</div> </div> </div>Шаг 4. Последний шаг – инициализация плагина на странице
<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>Готово, теперь у вас есть простые в установке, использовании табы для сайта.
Вариант табов №2
Как сделать вкладки (табы, tabs) на сайте? Очень просто, ниже вы найдете подробную инструкцию как правильно сделать табы. За частую они используются в интернет магазинах, когда нужно вывести характеристики, фото, описание в отдельных вкладках. И так, приступим к созданию вкладок:
1. В теги head добавляем подключение библиотеки Jquery (если у вас она подключена, пропустите данный пункт):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
2. Добавляем CSS код:
.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:
<div class="tabs"> <ul> <li>Первая вкладка</li> <li>Вторая вкладка</li> <li>Третья вкладка</li> </ul> <div> <div>Первое содержимое</div> <div>Второе содержимое</div> <div>Третье содержимое</div> </div> </div>
4. В конце (перед закрывающимся тегом body) вставляем javascript код:
<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>
Готово, теперь у вас есть простые в установке, использовании табы для сайта.
Залишити відповідь