Я использую Zurb Foundation 6 Tabs. У меня есть вопрос по JavaScript. Вот мой HTML для 3 вкладки макета.

<ul class="tabs" data-tabs id="myTabs">     
    <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1 Info</a></li>
    <li class="tabs-title" ><a href="#panel2">Tab 2 Info</a></li>
    <li class="tabs-title" ><a href="#panel3">Tab 3 Info</a></li>
</ul>

<div class="tabs-content" data-tabs-content="myTabs">
    <div class="tabs-panel is-active" id="panel1">
    ....
    </div>
    <div class="tabs-panel" id="panel2">
    ....
    </div>
    <div class="tabs-panel" id="panel3">
    ....
    </div>
</div>

Вкладки работают отлично! Однако я хочу загружать контент в Tab 3 только при нажатии. Я буду использовать ajax для загрузки контента. Документы Foundation 6 предоставляют событие javascript, которое срабатывает при нажатии на ЛЮБУЮ вкладку. См. ниже:

 $('#myTabs').on('change.zf.tabs', function() {
      console.log('Those tabs sure did change!');
 });

Мне нужно событие, чтобы срабатывать ТОЛЬКО когда выбрана панель 3. Как сделать?

7
Fox 14 Дек 2015 в 20:19

6 ответов

Лучший ответ

Вы можете использовать условие внутри события 'change.zf.tabs' , например:

$('#myTabs').on('change.zf.tabs', function() {

  if($('#panel3:visible').length){
    console.log('Tab 3 is now visible!');
  }

});
11
Dmitry Dubovetsky 14 Дек 2015 в 17:37

Попробуйте добавить условие на вкладку id, в которую вы хотите загружать контент, когда он выбран, например:

$('#myTabs').on('change.zf.tabs', function() {
   if ($(this).attr('id') == 'panel3')
   {
        //Load content here 
   }
}); 

Надеюсь это поможет.

1
Zakaria Acharki 14 Дек 2015 в 17:50

Для Foundation 6 (текущая версия 6.2.1) вы должны использовать следующий код, чтобы получить идентификатор измененной вкладки.

$('#myTabs').on('change.zf.tabs', function()
{
    var tabId = $('div[data-tabs-content="'+$(this).attr('id')+'"]').find('.tabs-panel.is-active').attr('id');
    alert(tabId);
}); 
5
Piet 22 Апр 2016 в 18:50

Я просто пришел к этой проблеме.

Завершено с использованием:

$(this).find('.is-active a').attr('id')

0
killebytes 25 Окт 2016 в 09:57

Мне повезло с этим в Foundation 6:

$('.tabs').on('change.zf.tabs', function(event, tab){
    console.log(tab.children('a').attr('id'));
    console.log(tab.children('a').attr('href'));
});
0
Aaron McMillin 15 Фев 2017 в 04:44

Для Foundation 6 я использовал:

$("#section-tabs").on('change.zf.tabs', function (event, tab) {
        var tabId = tab.attr("id");
}) 
0
Idan Shechter 5 Июл 2018 в 01:36