I am using Zurb Foundation 6 Tabs. I have a javascript question. Here is my html for a 3 tab layout.
<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>
The tabs work great! However, I want to load content into Tab 3 only when clicked. I will be using ajax to load the content. Foundation 6 docs provide a javascript event that fires when ANY tab is clicked on. See below:
$('#myTabs').on('change.zf.tabs', function() {
console.log('Those tabs sure did change!');
});
I need an event to fire ONLY when panel3 is selected. How to do?
You can use condition inside 'change.zf.tabs' event, like this:
$('#myTabs').on('change.zf.tabs', function() {
if($('#panel3:visible').length){
console.log('Tab 3 is now visible!');
}
});
For Foundation 6 (current version is 6.2.1) you should 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);
});
Try to add condition on tab id
you want to load content when it's selected, e.g :
$('#myTabs').on('change.zf.tabs', function() {
if ($(this).attr('id') == 'panel3')
{
//Load content here
}
});
Hope this helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With