選択したタブの内容を読み込みます（Foundation）

Question

私はZurb Foundation 6のタブを使用しています。私はJavaScriptの質問があります。 3タブレイアウトのHTMLです

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

タブがうまく機能します。しかし、私はクリックしたときにのみ、タブ3にコンテンツをロードしたい。私はajaxを使ってコンテンツを読み込みます。 Foundation 6のドキュメントは、ANYタブがクリックされたときに起動するjavascriptイベントを提供します。以下を参照してください：

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

panel3が選択されている場合にのみ起動するイベントが必要です。実行する方法？

Answer 1

あなたはこのように、「change.zf.tabs」イベント内の条件を使用することができます。

は

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

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

}); 

Answer 2

は例えば、あなたはそれが選択されている時にコンテンツをロードするタブidに条件を追加してください：

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

・ホープ、このことができます。

Answer 3

財団6（現在のバージョンは6.2.1です）のために、あなたが取得するために、次のコードを使用する必要があります変更されたタブのID。

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

この問題が発生しました。

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

Answer 5

を私は財団6でこれでいくつかの幸運を持っています：常に私のために

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