Inhalt auf Tab laden ausgewählt (Foundation)

Question

Ich verwende Zurb Foundation 6 Tabs. Ich habe eine Javascript-Frage. Hier ist mein HTML für ein 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> 

Die Registerkarten funktionieren gut! Ich möchte jedoch Inhalte nur dann in Tab 3 laden, wenn Sie darauf klicken. Ich werde Ajax verwenden, um den Inhalt zu laden. Die Dokumentation der Foundation 6 bietet ein JavaScript-Ereignis, das ausgelöst wird, wenn auf eine Registerkarte geklickt wird. Siehe unten:

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

Ich brauche ein Ereignis zu schießen, nur wenn Panel3 ausgewählt ist. Wie macht man?

Answer 1

können Sie Bedingung verwenden innerhalb Veranstaltung 'change.zf.tabs', wie folgt aus:

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

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

}); 

Answer 2

Try Zustand auf Registerkarte hinzufügen id Sie Inhalt geladen werden soll, wenn es ausgewählt ist, z:

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

Hoffnung, das hilft.

Answer 3

Für Foundation 6 (aktuelle Version ist 6.2.1), sollten Sie den folgenden Code verwenden die erhalten ID der geänderten Registerkarte

$('#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 4

Ich kam gerade zu diesem Problem.

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

Answer 5

Ich habe etwas Glück mit diesem in Stiftung 6:

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