Вариант табов №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>Готово, теперь у вас есть простые в установке, использовании табы для сайта.
Залишити відповідь