如何以编程方式选择选项卡？

Answer 1

据我所知，手动更改选项卡 (

is-active

) 和选项卡面板 (

.mdl-layout__tab

) 上的

.mdl-layout__tab-panel

类确实会产生所需的结果。

使用 jQuery：

            // remove all is-active classes from tabs
            $('a.mdl-layout__tab').removeClass('is-active');
            // activate desired tab
            $('a[href="#fixed-tab-2"]').addClass('is-active');
            // remove all is-active classes from panels
            $('.mdl-layout__tab-panel').removeClass('is-active');
            // activate desired tab panel
            $('#fixed-tab-2').addClass('is-active');

Answer 2

您可以通过在 DOM 元素上使用 Click() 方法来模拟 Click 事件。

document.getElementById("AnchorTagId").click()

Answer 3

您可以使用 jquery 模拟单击选项卡按钮

ex（以编程方式激活第二个选项卡 - 索引 1）：

$(".mdl-layout__tab:eq(1) span").click ();

ex（以编程方式激活第一个选项卡 - 索引 0）：

$(".mdl-layout__tab:eq(0) span").click ();

Answer 4

目前没有编程方式来切换布局选项卡或普通选项卡。用于处理这些的对象不通过小部件系统公开，因此没有指导它们做什么。

请在问题跟踪器上提交功能请求，以便我们为未来的版本提供可操作的内容。

Answer 5

使用 mdl（@版本 v1.2.1）

你可以用 jQuery 模拟点击事件：

$(".mdl-tabs__tab:eq(0) span").click (); //for the first tab (index 0)
$(".mdl-tabs__tab:eq(1) span").click (); //for the second tab (index 1)

...

在 Firefox 50.0 - 50.0.2 和 Microsoft Edge 38.14393.0.0 上测试

Answer 6

看来此功能自 2017 年 6 月起已包含在 MDL 代码中 https://github.com/google/material-design-lite/pull/5091

但是自 2016 年 12 月以来就没有发布过

Answer 7

使用 jQuery 的解决方案，包括上一个/下一个功能：

$('#next-button').on('click', function() {
    $('.mdl-tabs__tab.is-active').next().find('span').click();
  });

$('#prev-button').on('click', function() {
   $('.mdl-tabs__tab.is-active').prev().find('span').click();
});

Answer 8

它对我有用

$('#tabid').tabs('select', 'select-Id');

Answer 9

请告诉我如何使用 URL 链接切换选项卡？