Как сделать вкладки на сайте?

Для чего нужно понимать, как сделать вкладки на сайте? Многие владельцы сайтов сталкиваются с проблемой размещения большого количества информации. Как разместить тысячи символов, так чтобы это не превратилось в длинную простыню?

В этом случая на помощь приходят тыбы для сайта, они же вкладки на сайте.

Пример работы вкладок — demo

Как сделать вкладки на сайте — шаг первый. Разметка

<div class="blocktb">
<ul class="tb">
<li class="choice">первая</li>
<li>вторая</li>
</ul>
<div class="tbcon align choice">
Сюда добавляем необходимый контент
</div>
<div class="tbcon">
Сюда добавляем необходимый контент
</div>
</div>

надежный хостинг

Вкладки формируются из блоков, а элементы управления из списка. Количество вкладок может быть любым.
Что касается наполнения, во вкладки можно добавить любой материал:
Фото
Видео
Формы регистрации и подписки
Текст и др.

Вкладки на странице сайта — шаг второй. Стили.

.blocktb {
max-width: 50em;
margin: 0 0 1em;
}
.tb {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
position: relative;
margin: -1px 0 0 -1px;
}
.tb li:last-child:before {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: -2px;
z-index: -1;
height: 5px;
background: #7DCA86;
}
.tb :after {
content: '';
display: table;
clear: both;
}
.tb li {
padding: 9px 15px;
margin: 1px 0 0 1px;
background: #61AF6A;
color: #FFF;
position: relative;
border: solid #61AF6A;
border-width: 2px 2px 0;
border-radius: 5px 5px 0 0;
text-align: center;
}
.tb li:not(.choice) {
cursor: pointer;
}
.tb li:not(.choice):hover {
background: #7DCA86;
border-color: #7DCA86;
}
.tb .choice {
background: #FFF;
color: #000;
border-color: #7DCA86;
}
.tb .choice:after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 5px;
background: #FFF;
}
.tbcon{
display: none;
background: #FFF;
border: 2px solid #7DCA86;
border-radius: 0 5px 5px 5px;
padding: 7px 15px;
}
.tbcon.choice{
display: block;
}

В стилях мы задаем расположение вкладок и их внешний вид. Вкладки легко изменяются, для этого необходимы минимальные знания css и немного времени

Как сделать вкладки на сайте — третий шаг. Скрипт переключения вкладок

(function($) {
$(function() {
$('ul.tb ').each(function(i) {
var storage = localStorage.getItem('tab' + i);
if (storage) {
$(this).find('li').removeClass('choice').eq(storage).addClass('choice') .closest('div.blocktb').find('div.tbcon').removeClass('choice').eq(storage).addClass('choice');
}
});

$('ul.tb ').on('click', 'li:not(.choice)', function() {
$(this)
.addClass('choice').siblings().removeClass('choice') .closest('div.blocktb').find('div.tbcon').removeClass('choice').eq($(this).index()).addClass('choice');
var ulIndex = $('ul.tb ').index($(this).parents('ul.tb '));
localStorage.removeItem('tab' + ulIndex);
localStorage.setItem('tab' + ulIndex, $(this).index());
});
});
})(jQuery);

Работа скрипта заключается в отслеживании состояния блока управления. По нажатию на название блока (в нашем случае «первая» и «вторая»), меняется класс у блока контента. За счет этого происходит переключение вкладок.
Чтобы наши табы заработали на странице сайта, к нему должна быть подключена jQuery библиотека.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Пример работы вкладок — demo
Важно, с точки зрения скорости загрузки сайта, все стили и скрипты лучше выносить в отдельный файл и подключать их в блоке head или перед закрывающим body

надежный хостинг
Поделиться в социальных сетях: