是否可以使用 Material Design Light 中的 javascript 从抽屉中激活选项卡？

Question

是否可以在 Material Design Lite 中使用 javascript 激活选项卡？

我想使用 mdl-layout__drawer 中的链接激活标签页？

有这个功能吗？

Answer 1

目前不支持以编程方式切换选项卡。

您需要反转选项卡的切换方式并实现您自己的函数来处理相同的逻辑。

Answer 2

没问题。我假设您希望抽屉中的所有内容都反映您的选项卡。如果你只想让某些项目激活选项卡而不是全部，只需调整示例代码中的最后一行，如果你想挑出哪个 link 可以添加一个 "drawer-tab-clicker" class激活选项卡，哪些不激活。我想要它们，所以下面的示例包含所有抽屉 links。

您应该为您的抽屉 link 提供与您要激活的选项卡完全相同的 href 哈希值，然后施展魔法 jQuery ...

    function opentab() {
            var draweritem = this;
            var target = $(draweritem).attr('href');
            $('.mdl-layout__obfuscator').click();
            $('a[href='+target+'].mdl-layout__tab span').click();
            return false;
    }
    $(".mdl-layout__drawer a").on('click',opentab);

这会抓取您刚刚单击的抽屉项目，读取它指向的 href，然后单击 "obfuscator" 关闭抽屉，然后找到布局选项卡基于 href。然后单击 link 内的 span（是的，不是 link 本身）。

适合我！

是否可以使用 Material Design Light 中的 javascript 从抽屉中激活选项卡？

Is it possible to activate a tab from drawer using javascript in Material Design Light?

javascript

material-design-lite