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

Салют! У меня такая трабла. Есть галерея в ней 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

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

Ага. Это интернет Диз херовый программист))))

dmtrave,
неужели так сложно сделать то что написано в 4 посте?
файл
common.js
строка 4
перенести в строку 130

и даже так вынести эти строки 120-128 и 4

$(window).on('load',function() {
 $('.bxslider').bxSlider(
        {
            captions: true,
            controls: false,
            auto: true,
            infiniteLoop: true,
            useCSS: false

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

})

Благодарю за помошь. Сделал, заработало на локалке. Если выгружаю на хост, перестает работать. Почистил куки, но не помогло.

там ничего не обновлено

Уже все обновилось. Какой-то глюк был с хостом. Все вроде работает. Благодарю Вас. Сложно быть нубом(