jqueryで選択されているタブを検出する

Question

materializecssを使用してタブを作成しています。そこで、私は、どのタブが開いているかを検出して、JavascriptまたはJqueryを使用してUIを設定したいところにいます。

例：

if (tab.index == 0 || 'brands'){ 
    //Configure some UI 
}else if(tab.index == 1 || 'products'){ 
    //Configure some UI 
} 

HTML部分は次のようになります。

<ul class="tabs blue-grey darken-2"> 
    <li class="tab col s6"><a class="active" href="#brands" style="color: white;">Brands</a></li> 
    <li class="tab col s6"><a style="color: white;" href="#products">Products</a></li> 
</ul> 

私はすでに手動で次のようにクリックするボタンの上にタブを変更でした：

$('ul.tabs').tabs('select_tab', 'products'); 

が、方法がわかりません質問の部分を達成する。私はいくつかの助けを得ることを望む:)私は多くの同様の質問を行ったが、解決策を見つけることができませんでした。質問が何とか反駁された場合は、コメントしてください。

Answer 1

onShowコールバックがあります。 http://materializecss.com/tabs.html

このコードはテストされておらず、ベンダーのWebサイトでonShowを使用する方法の簡単な例はありませんが、私はあなたにそれが表示されることを願っています。 'some_param'は、タブオブジェクトの属性を知る必要がある場所です。おそらくインデックスがあります。そうでなければ、最初と他のタブに差別化クラスを追加し、jquery .hasClass（classname '）を使用して次に何が起こるかを決めることができます。

$(document).ready(function(){ 
    $('ul.tabs').tabs('select_tab', 'tab_id').onShow(function(selectedTab){ 

    if (selectedTab.some_param === some_val){ 
     ...do something 
    } 

    }); 
});