ПОмогите с реализацией табов для галереи.
 

Салют! У меня такая трабла. Есть галерея в ней 3 слайдера и 3 кнопки, при клике на одну из них показывается соответствующий слайдер.
Слайдер реализован с помощью bxslider. Я сделал 3 дива, запихнул туда слайдеры, сделал им дисплей двум дивам display: none. И написал скрипт, но после клике у меня отображается пустой див. Помогите решить плиз.

Вот сайт, конкретно на эту секцию: http://pb-lab.com.ua/#S3
Заранее благодарен всем. :)

$('a.tab1').on('click', function(e){
e.preventDefault();
$('.navtab3S3').hide();
$('.navtab1S3').show();
});

$('a.tab2').on('click', function(e){
e.preventDefault();
$('.navtab1S3').hide();
$('.navtab2S3').show();
});

$('a.tab3').on('click', function(e){
e.preventDefault();
$('.navtab2S3').hide();
$('.navtab3S3').show();
});

dmtrave,
не прячьте пока не проинициализируите

Благодарю. А можно подробнее?

dmtrave,
убрать display: none. после

$('.bxslider').bxSlider(
            {
            captions: true
            });

$('.navtab2S3,navtab3S3').hide();

и переключалки свои исправьте -- у вас три блока а не два.

dmtrave,

$('a.tab1').on('click', function(e){
 e.preventDefault();
 $('.sectionS3ContentLeft > div').hide()
 .eq(0).show();
 });

 $('a.tab2').on('click', function(e){
 e.preventDefault();
 $('.sectionS3ContentLeft > div').hide()
 .eq(1).show();
 });

 $('a.tab3').on('click', function(e){
 e.preventDefault();
 $('.sectionS3ContentLeft > div').hide()
 .eq(2).show();
 });

Благодарю Вас) Все стало на свои места. :thanks: Можно еще вопрос? На странице есть меню (сандвич) которое фиксированное и движется вниз при скроле. Мне нужно что бы для белых секций но меняло цвет на черный. Я знаю как сделать что бы менялся его цвет при достижении определенной вы высоты в пикселях. А вот конкретно по якорю например не могу это реализовать.

обалдеть :)
документацию читайте на fullPage, раз этот плагин используите
меняйте цвет согласно индексу секции пример здесь
вам только определится что лучше afterLoad или onLeave
https://github.com/alvarotrigo/fullPage.js#callbacks

Спасибо, понял) Нуб пошел читать. Прошу прощения, если задаю дурацкие вопросы) Доброй ночи

рони,
Салют еще раз. Уважаемый Рони, можно Вам задать еще 1 вопрос. Скрипт с которым Вы мне помогли, работает отлично. Но появилась новая проблема. При переключении кнопки на див у которого display: none, у дива bx-viewport (я использу bxslider) height 0 px. и так же у следующего. Коректно отображается только див который видем изначально.

Вот секция с этой проблемой: http://pb-lab.com.ua/#S3. За ранее очень благодарен за любую помощь. Еще даю ссылку на репу на гите, может это нужно будет https://github.com/dmtrave/PlanB_project3

Видать не заработали интерьерные дизы на нормального программиста. )))