Question

我正在使用materializecss来创建标签页。所以我想要检测哪个选项卡被打开，然后使用Javascript或Jquery配置UI。

E.g

 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

此代码未经测试，并且没有关于如何在供应商网站上使用onShow的简单示例，但我希望它能为您指明方向。 'some_param'是你需要知道tab对象的属性的地方 - 也许它有一个索引。如果没有，那么也许你可以在第一个和其他选项卡中添加区分类，并使用jquery .hasClass（classname'）来决定接下来会发生什么。

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

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

  });
});

检测使用jquery选择的选项卡

1 个答案: