Как добавить новые вкладки в White Label

По умолчанию White Label от Travelpayouts содержит две вкладки: Авиабилеты и Отели. В настройках White Label вы можете отключить одну из них. В этой статье вы узнаете, как добавить ещё вкладок, например с формой поиска рекламодателя или ссылкой на его сайт.

Обратите внимание, если у вас выбрано несколько языков, то код нужно добавлять для каждого языка.

Подготовка к добавлению расширения

Чтобы всё работало корректно, сначала добавьте код подключения библиотеки для обработки jquery. Для этого откройте настройки White Label и перейдите в раздел Подвал.

В блоке для ввода кода, добавьте следующий код:

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>

Обратите внимание! Код подключения библиотеки jquery добавляется только один раз. Если вы добавляете другие расширения для White Label, то повторно код вставлять не нужно.

mceclip0.png

Вкладка со ссылкой на сайт рекламодателя

Чтобы добавить вкладку, при нажатии на которую будет открываться сайт любого рекламодателя, в настройках White Label откройте раздел Подвал и в блоке для ввода кода, добавьте следующий код (новый код добавляется после уже существующего):

<script>
window.onload = function() {
$(".mewtwo-tabs_list").append('<li class="mewtwo-tabs-tabs_list__item mewtwo-tabs-tabs_list__item--count2 mewtwo-tabs-tabs_list__item"><a href="ЗДЕСЬ_ССЫЛКА_НА_САЙТ_РЕКЛАМОДАТЕЛЯ"><span>Вкладка со ссылкой</span</a></li>');
};
</script>

Обратите внимание! Обязательно разместите ссылку на сайт рекламодателя в параметр href.

В результате у вас в подвале сайта будет такой код:

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script>
window.onload = function() {
$(".mewtwo-tabs_list").append('<li class="mewtwo-tabs-tabs_list__item mewtwo-tabs-tabs_list__item--count2 mewtwo-tabs-tabs_list__item"><a href="https://c24.travelpayouts.com/click?shmarker=78606&promo_id=3201&source_type=link&type=click"><span>Вкладка со ссылкой</span</a></li>');
};
</script>

Как это выглядит:

tab_with_link.gif

Вкладка с виджетом рекламодателя

Чтобы добавить вкладку, при нажатии на которую будет открываться форма виджета рекламодателя, откройте настройки White Label, вкладка Шапка и добавьте следующий код:

<!-- START виджет для вкладки-->
<div class="widget-block"><script src="ЗДЕСЬ_ССЫЛКА_НА_ВИДЖЕТ_РЕКЛАМОДАТЕЛЯ" charset="utf-8" async="true"></script></div>
<!-- END виджет для вкладки-->

в параметре src укажите ссылку на виджет рекламодателя. Например,

https://c45.travelpayouts.com/content?promo_id=1655&shmarker=78606&locale=ru&button_color=FFA600&background_color=00AFDD&border_radius=0px&full_width=false&logo=false&tborder=true&hide_header=true&powered_by=false

Далее откройте вкладку Подвал и добавьте следующий код:

<!-- START скрипт добавления вкладки с рекламодателем -->
<script>
window.onload = function() {
$('.mewtwo-tabs_list').append('<li class="mewtwo-tabs-tabs_list__item mewtwo-tabs-tabs_list__item--count3 mewtwo-tabs-tabs_list__item"><a href="#" class="widget-click"><span>Поезда</span</a></li>');
$('.widget-block').appendTo('.mewtwo-widget');
$('.mewtwo-tabs-tabs_list__item--flights').click(function(e){
e.preventDefault();
$('.widget-block').hide();
$('.mewtwo-flights').removeClass('remove-w');
$('.mewtwo-hotels').removeClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
});
$('.mewtwo-tabs-tabs_list__item--hotels').click(function(e){
e.preventDefault();
$('.widget-block').hide();
$('.mewtwo-flights').removeClass('remove-w');
$('.mewtwo-hotels').removeClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count2').addClass('mewtwo-tabs-tabs_list__item--active');
});
$('.widget-click').click(function(e){
e.preventDefault();
$('.widget-block').show();
$('.mewtwo-flights').addClass('remove-w');
$('.mewtwo-hotels').addClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').addClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count2').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count1').removeClass('mewtwo-tabs-tabs_list__item--active');
});
};
</script>
<!-- END скрипт добавления вкладки с рекламодателем -->
<style>
.widget-block{
display: none;
}
.mewtwo-widget section.remove-w{
display: none !important;
}
</style>

Обратите внимание на следующую часть кода:

 $('.mewtwo-tabs_list').append('<li class="mewtwo-tabs-tabs_list__item mewtwo-tabs-tabs_list__item--count3 mewtwo-tabs-tabs_list__item"><a href="#" class="widget-click"><span>Поезда</span</a></li>');

В нём вы можете изменить текст, который будет отображаться на вкладке (в примере это Поезда).

Как это выглядит:

tab_with_widget.gif

Вкладка с White Label виджетом рекламодателя

Если вы размещаете обычный виджет, то результат поиска будет открываться на сайте рекламодателя. При этом у некоторых рекламодателей есть White Label виджеты, которые позволяют открывать результат на той же странице, где размещен виджет.

Обратите внимание! В этом разделе описывается процесс добавления White Label виджета вместо обычного виджета. Если вы хотите добавить несколько вкладок с разными виджетами, переходите к следующему пункту.

Чтобы добавить виджет, откройте настройки White Label, вкладку Главная страница и добавьте код вида:

<!-- START виджет лейбла -->
<div class="widget-block"><script src="//c24.travelpayouts.com/content?promo_id=1498&shmarker=188189&width=960&background=%2300AFDD&foreground=%23eeeeee&section=%23ffed74&highlight=%23e5d568&auto_start=false&country=%D0%A2%D0%B0%D0%B8%D0%BB%D0%B0%D0%BD%D0%B4&tourists=2&powered_by=true" charset="utf-8"></script></div>
<!-- END виджет лейбла -->

Откройте вкладку Подвал и добавьте следующий код:

<!-- START скрипт добавления вкладки с трансфером -->
<script>
window.onload = function() {
$('.mewtwo-tabs_list').append('<li class="mewtwo-tabs-tabs_list__item mewtwo-tabs-tabs_list__item--count3 mewtwo-tabs-tabs_list__item"><a href="#" class="widget-click"><span>Трансфер</span</a></li>');
$('.widget-block').appendTo('.mewtwo-widget');
$('.mewtwo-tabs-tabs_list__item--flights').click(function(e){
e.preventDefault();
$('.widget-block').hide();
$('.mewtwo-flights').removeClass('remove-w');
$('.mewtwo-hotels').removeClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
});
$('.mewtwo-tabs-tabs_list__item--hotels').click(function(e){
e.preventDefault();
$('.widget-block').hide();
$('.mewtwo-flights').removeClass('remove-w');
$('.mewtwo-hotels').removeClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count2').addClass('mewtwo-tabs-tabs_list__item--active');
});
$('.widget-click').click(function(e){
e.preventDefault();
$('.widget-block').show();
$('.mewtwo-flights').addClass('remove-w');
$('.mewtwo-hotels').addClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').addClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count2').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count1').removeClass('mewtwo-tabs-tabs_list__item--active');
});
};
</script>
<!-- END скрипт добавления вкладки с трансфером -->
<style>
.widget-block{
display: none;
}
.mewtwo-widget section.remove-w{
display: none !important;
}
</style>

Обратите внимание на следующую часть кода:

$('.mewtwo-tabs_list').append('<li class="mewtwo-tabs-tabs_list__item mewtwo-tabs-tabs_list__item--count3 mewtwo-tabs-tabs_list__item"><a href="#" class="widget-click"><span>Трансфер</span</a></li>');

В нём вы можете изменить текст, который будет отображаться на вкладке (в примере это Трансфер).

Как это выглядит:

tab_with_wl_widget.gif

Как добавить несколько вкладок

Принцип добавления нескольких вкладок похож на описанный выше подход. Вам нужно добавить вызов кода для виджета в настройках White Label в разделе Шапка. После этого в подвале White Label добавить вывод вкладок и логику переключения между ними.

Вы можете воспользоваться уже готовым кодом, который используется здесь:

Конечно, не забудьте при этом заменить код виджетов на свои.

Код для Шапки:

<!-- START виджет для Ж/Д вкладки-->
<div class="widget-block" style="display:none;"><script src="https://c45.travelpayouts.com/content?promo_id=1655&shmarker=229849"></script></div>
<!-- END виджет для Ж/Д вкладки-->

<!-- START виджет для вкладки Страховка-->
<div class="widget-block-st" style="display:none;"><script src="//c24.travelpayouts.com/content?promo_id=1498&shmarker=229849&width=1180&background=%23ffffff&foreground=%23eeeeee&section=%23ffed74&highlight=%23e5d568&auto_start=false&country=%D0%A2%D0%B0%D0%B8%D0%BB%D0%B0%D0%BD%D0%B4&tourists=2&powered_by=true" charset="utf-8"></script></div>
<!-- END виджет для вкладки Страховка-->

<!-- START виджет для вкладки Трансфер-->
<div class="widget-block-tr" style="display:none;"><script src="https://c1.travelpayouts.com/content?promo_id=1486&shmarker=229849&theme=1&language=ru&powered_by=false" charset="utf-8" async></script></div>
<!-- END виджет для вкладки Трансфер-->

<!-- START виджет для вкладки Тур-->
<div class="widget-block-tur" style="display:none;">
<iframe src="https://exsy.com.ua/index221.html" style="min-width: 240px; width: 100%; height: 0px; overflow: hidden; border: none; min-height: 405px; position: absolute" seamless="" width="100%" height="100%" hspace="0" vspace="0" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" allowtransparency="true" id="kw-search-form"></iframe>
</div>
<!-- END виджет для вкладки Тур-->

<!-- START виджет для вкладки Экскурсии-->
<div class="widget-block-ex" style="display:none;">
<div id="powered_by_1498" class="wbe__containe">
<a target="_blank" href="https://c11.travelpayouts.com/click?shmarker=229849&promo_id=1751&source_type=link&type=click">Необычные экскурсии в Риме</a>,
<a target="_blank" href="https://c11.travelpayouts.com/click?shmarker=229849&promo_id=1750&source_type=link&type=click">Париже</a>,
<a target="_blank" href="https://c11.travelpayouts.com/click?shmarker=229849&promo_id=1749&source_type=link&type=click">Санкт-Петербурге</a>,
<a target="_blank" href="https://c11.travelpayouts.com/click?shmarker=229849&promo_id=1748&source_type=link&type=click">Москве</a>,
<a target="_blank" href="https://c11.travelpayouts.com/click?shmarker=229849&promo_id=1747&source_type=link&type=click">Барселоне</a>,
<a target="_blank" href="https://c11.travelpayouts.com/click?shmarker=229849&promo_id=1746&source_type=link&type=click">Праге</a>
</div>
</div>
<!-- END виджет для вкладки Экскурсии-->

Код для Подвала:

<!-- START скрипт добавления вкладки с ссылкой для перехода -->
<script>
window.onload = function() {
//menu
$(".main-navigation__dropdown").click(function(e) {
e.preventDefault();
if ($(this).hasClass('dropdown_opened')) {
$(this).removeClass('dropdown_opened');
} else {
$(this).addClass('dropdown_opened');
}
});
//скрытие menu
$(document).click( function(event){
if( $(event.target).closest('.main-navigation__dropdown').length)
return;
$('.main-navigation__dropdown').removeClass('dropdown_opened');
event.stopPropagation();
});
//slick slider
$('.header__slider').slick();

//вкладка жд билет
$('.mewtwo-tabs_list').append('<li class="mewtwo-tabs-tabs_list__item mewtwo-tabs-tabs_list__item--count3 mewtwo-tabs-tabs_list__item"><a href="#" class="widget-click"><span>Ж/д билеты</span</a></li><li class="mewtwo-tabs-tabs_list__item mewtwo-tabs-tabs_list__item--count4 mewtwo-tabs-tabs_list__item"><a href="#" class="widget-click-st"><span>Страховка</span</a></li><li class="mewtwo-tabs-tabs_list__item mewtwo-tabs-tabs_list__item--count5 mewtwo-tabs-tabs_list__item"><a href="#" class="widget-click-tr"><span>Трансферы</span</a></li><li class="mewtwo-tabs-tabs_list__item mewtwo-tabs-tabs_list__item--count6 mewtwo-tabs-tabs_list__item"><a href="#" class="widget-click-tur"><span>Туры</span</a></li><li class="mewtwo-tabs-tabs_list__item mewtwo-tabs-tabs_list__item--count7 mewtwo-tabs-tabs_list__item"><a href="#" class="widget-click-ex"><span>Экскурсии</span</a></li>');
$('.widget-block').appendTo('.mewtwo-widget');
$('.widget-block-st').appendTo('.mewtwo-widget');
$('.widget-block-tr').appendTo('.mewtwo-widget');
$('.widget-block-tur').appendTo('.mewtwo-widget');
$('.widget-block-ex').appendTo('.mewtwo-widget');
$('.mewtwo-tabs-tabs_list__item--flights').click(function(e){
e.preventDefault();
//виджет показать
$('.sob__all').hide();
$('.sob__avia').show();

$('.widget-block').hide();
$('.widget-block-st').hide();
$('.widget-block-tr').hide();
$('.widget-block-tur').hide();
$('.widget-block-ex').hide();
$('.mewtwo-flights').removeClass('remove-w');
$('.mewtwo-hotels').removeClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count4').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count5').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count6').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count7').removeClass('mewtwo-tabs-tabs_list__item--active');
});
$('.mewtwo-tabs-tabs_list__item--hotels').click(function(e){
e.preventDefault();
//виджет показать
$('.sob__all').hide();
$('.sob__otel').show();

$('.widget-block').hide();
$('.widget-block-st').hide();
$('.widget-block-tr').hide();
$('.widget-block-tur').hide();
$('.widget-block-ex').hide();
$('.mewtwo-flights').removeClass('remove-w');
$('.mewtwo-hotels').removeClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count7').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count6').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count5').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count4').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count1').removeClass('mewtwo-tabs-tabs_list__item--active');
$('mewtwo-tabs-tabs_list__item--hotels').addClass('mewtwo-tabs-tabs_list__item--active');
});
$('.widget-click').click(function(e){
e.preventDefault();
//виджет показать
$('.sob__all').hide();
$('.sob__zd').show();

$('.widget-block').show();
$('.widget-block-st').hide();
$('.widget-block-tr').hide();
$('.widget-block-tur').hide();
$('.widget-block-ex').hide();
$('.mewtwo-flights').addClass('remove-w');
$('.mewtwo-hotels').addClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count3').addClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count7').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count6').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count5').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count4').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count2').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count1').removeClass('mewtwo-tabs-tabs_list__item--active');
});
$('.widget-click-st').click(function(e){
e.preventDefault();
//виджет показать
$('.sob__all').hide();
$('.sob__str').show();

$('.widget-block').hide();
$('.widget-block-st').show();
$('.widget-block-tr').hide();
$('.widget-block-tur').hide();
$('.widget-block-ex').hide();
$('.mewtwo-flights').addClass('remove-w');
$('.mewtwo-hotels').addClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count4').addClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count7').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count6').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count5').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count2').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count1').removeClass('mewtwo-tabs-tabs_list__item--active');
});
$('.widget-click-tr').click(function(e){
e.preventDefault();
//виджет показать
$('.sob__all').hide();
$('.sob__tr').show();

$('.widget-block').hide();
$('.widget-block-st').hide();
$('.widget-block-tr').show();
$('.widget-block-tur').hide();
$('.widget-block-ex').hide();
$('.mewtwo-flights').addClass('remove-w');
$('.mewtwo-hotels').addClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count5').addClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count7').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count6').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count4').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count2').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count1').removeClass('mewtwo-tabs-tabs_list__item--active');
});

$('.widget-click-tur').click(function(e){
e.preventDefault();

//виджет показать
$('.sob__all').hide();
$('.sob__tur').show();

$('.widget-block').hide();
$('.widget-block-st').hide();
$('.widget-block-tr').hide();
$('.widget-block-tur').show();
$('.widget-block-ex').hide();
$('.mewtwo-flights').addClass('remove-w');
$('.mewtwo-hotels').addClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count6').addClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count7').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count5').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count4').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count2').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count1').removeClass('mewtwo-tabs-tabs_list__item--active');
});

$('.widget-click-ex').click(function(e){
e.preventDefault();
//виджет показать
$('.sob__all').hide();
$('.sob__ex').show();

$('.widget-block').hide();
$('.widget-block-st').hide();
$('.widget-block-tr').hide();
$('.widget-block-tur').hide();
$('.widget-block-ex').show();
$('.mewtwo-flights').addClass('remove-w');
$('.mewtwo-hotels').addClass('remove-w');
$('.mewtwo-tabs-tabs_list__item--count7').addClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count6').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count5').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count4').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count2').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count1').removeClass('mewtwo-tabs-tabs_list__item--active');
});

$('.btn__slider_one').click(function(e){
e.preventDefault();
$('.widget-click-st').click();
});

$('.btn__slider_two').click(function(e){
e.preventDefault();
$('.widget-click-tur').click();
});

$('.header_link_tur').click(function(e){
e.preventDefault();
$('.widget-click-tur').click();
});
$('.header_link_ex').click(function(e){
e.preventDefault();
$('.widget-click-ex').click();
});
$('.header_link_tr').click(function(e){
var link = $(this);
var target = link.attr("target");
window.open(link.attr("href"), target);
});
$('.header_link_zd').click(function(e){
e.preventDefault();
$('.widget-click').click();
});
$('.header_link_avia').click(function(e){
e.preventDefault();
//виджет показать
$('.sob__all').hide();
$('.sob__avia').show();
$('.widget-block').hide();
$('.widget-block-st').hide();
$('.widget-block-tr').hide();
$('.widget-block-tur').hide();
$('.widget-block-ex').hide();
$('.mewtwo-flights').removeClass('remove-w');
$('.mewtwo-hotels').removeClass('remove-w');
$('.mewtwo-flights').removeClass('mewtwo-tabs-container--hidden');
$('.mewtwo-flights').removeClass('mewtwo-tabs-container--transparent');
$('.mewtwo-hotels').addClass('mewtwo-tabs-container--hidden');
$('.mewtwo-hotels').addClass('mewtwo-tabs-container--transparent');
$('.mewtwo-tabs-tabs_list__item--flights').addClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--hotels').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count4').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count5').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count6').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count7').removeClass('mewtwo-tabs-tabs_list__item--active');
});
$('.header_link_otel').click(function(e){
e.preventDefault();
//виджет показать
$('.sob__all').hide();
$('.sob__otel').show();
$('.widget-block').hide();
$('.widget-block-st').hide();
$('.widget-block-tr').hide();
$('.widget-block-tur').hide();
$('.widget-block-ex').hide();
$('.mewtwo-flights').removeClass('remove-w');
$('.mewtwo-hotels').removeClass('remove-w');
$('.mewtwo-hotels').removeClass('mewtwo-tabs-container--hidden');
$('.mewtwo-hotels').removeClass('mewtwo-tabs-container--transparent');
$('.mewtwo-flights').addClass('mewtwo-tabs-container--hidden');
$('.mewtwo-flights').addClass('mewtwo-tabs-container--transparent');
$('.mewtwo-tabs-tabs_list__item--hotels').addClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--flights').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count7').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count6').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count5').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count4').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count3').removeClass('mewtwo-tabs-tabs_list__item--active');
$('.mewtwo-tabs-tabs_list__item--count1').removeClass('mewtwo-tabs-tabs_list__item--active');
});
};
</script>
<!-- END скрипт добавления вкладки с ссылкой для перехода -->

Стили для вкладок

Вы можете изменять стиль оформления и количество вкладок по своему усмотрению. Если вам не хватает знаний HTML, CSS и JS — найдите разработчика на фрилансе, который сможет вам помочь.

Файл с набором стилей с сайта kit.travel: style.css

Была ли эта статья полезной?

Еще есть вопросы? Отправить запрос