Carica contenuto nella scheda selezionata (Foundation)

Question

Sto utilizzando le schede di Zurb Foundation 6. Ho una domanda javascript. Ecco il mio html per un layout a 3 schede.

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

Le schede funzionano benissimo! Tuttavia, voglio caricare il contenuto in Tab 3 solo quando si fa clic. Userò ajax per caricare il contenuto. I documenti Foundation 6 forniscono un evento javascript che si attiva quando si fa clic su QUALSIASI scheda. Vedi sotto:

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

Ho bisogno di un evento da attivare SOLO quando panel3 è selezionato. Come fare?

Answer 1

È possibile utilizzare condizioni all'interno evento 'change.zf.tabs', in questo modo:

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

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

}); 

Answer 2

tenta di aggiungere condizioni su scheda id si desidera caricare il contenuto quando viene selezionato, per esempio:

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

Spero che questo aiuti.

Answer 3

Per Fondazione 6 (versione corrente è la 6.2.1) si dovrebbe utilizzare il seguente codice per ottenere il ID della scheda modificata.

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

Sono appena arrivato a questo problema.

Ended utilizzando:

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

Answer 5

Sto avendo un po 'di fortuna con questo in Fondazione 6:

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