Upload content to selected tab (Foundation)

Question

I use the Zurb Foundation 6 Tabs tabs. I have a javascript question. Here is my html for layout 3 tabs.

<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> 

Tabs work great! However, I want to load content into Tab 3 only when clicked. I will use ajax to load the content. Foundation 6 documents provide a javascript event that fires when you click on ANY tab. See below:

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

I need the event to fire ONLY when a panel is selected3. How to do it?

Answer 1

You can use the condition inside the event 'change.zf.tabs , for example:

 $('#myTabs').on('change.zf.tabs', function() { if($('#panel3:visible').length){ console.log('Tab 3 is now visible!'); } }); 

Answer 2

For Foundation 6 (current version 6.2.1), you must use the following code to get the ID of the changed tab.

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

Answer 3

Try adding a condition to the id tab that you want to load when it is selected, for example:

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

Hope this helps.

Answer 4

I just came to this problem.

Finished with:

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

Answer 5

I got lucky with this in Foundation 6:

 $('.tabs').on('change.zf.tabs', function(event, tab){ console.log(tab.children('a').attr('id')); console.log(tab.children('a').attr('href')); });