Załaduj zawartość na wybranej zakładce (Fundacja)

Question

Używam kart Zurb Foundation 6. Mam pytanie javascript. Oto mój html dla układu 3 kart.

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

Zakładki działają świetnie! Jednak chcę załadować zawartość do Tab 3 tylko po kliknięciu. Będę używał ajaxa, aby załadować zawartość. Dokumenty Foundation 6 dostarczają zdarzenia javascript uruchamiane po kliknięciu dowolnej karty. Zobacz poniżej:

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

Potrzebuję zdarzenia, które będzie uruchamiane TYLKO po wybraniu panelu3. Jak zrobić?

Answer 1

Można użyć warunku wewnątrz imprezy „change.zf.tabs”, podobnie jak to:

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

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

}); 

Answer 2

Spróbuj dodać stan na karcie id chcesz załadować zawartość, gdy jest wybrany, na przykład:

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

nadzieję, że to pomaga.

Answer 3

fundamentowe 6 (aktualna wersja to 6.2.1) należy użyć następującego kodu, aby uzyskać Identyfikator zmienionej karty.

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

Właśnie przyszedłem do tego problemu.

zakończony przy użyciu:

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

Answer 5

mam trochę szczęścia z tym w Fundacji 6:

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