在选定的选项卡上加载内容(基础)

我正在使用Zurb Foundation 6 Tabs.我有一个javascript问题.这是我的html为3选项卡布局.

     
    
Tab 1 Info
    
Tab 2 Info
    
Tab 3 Info



    

    ....
    
    

    ....
    
    

    ....
    

标签效果很好!但是,我只想在单击时将内容加载到Tab 3中.我将使用ajax加载内容.Foundation 6 docs提供了一个javascript事件,当单击任何选项卡时会触发该事件.见下文:

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

我只需要选择panel3时才需要触发事件.怎么做？

您可以在'change.zf.tabs'事件中使用条件,如下所示:

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

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

});

对于Foundation 6(当前版本为6.2.1),您应使用以下代码获取已更改选项卡的ID.

$('#myTabs').on('change.zf.tabs', function()
{
    var tabId = $('div[data-tabs-content="'+$(this).attr('id')+'"]').find('.tabs-panel.is-active').attr('id');
    alert(tabId);
});