11

我正在使用布局组件页面中的 mdl 选项卡栏。

  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
    </div>
    <!-- Tabs -->
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
      <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
      <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
    </div>
  </header>

我是否必须在两个选项卡/面板上添加/删除“is-active”类，或者是否有更简单的方法来以编程方式选择选项卡？

4

8 回答 8

12

据我所知，手动更改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');
于 2015-07-14T21:28:24.967 回答
9

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

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

于 2015-12-11T10:04:51.147 回答
6

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

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

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

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

$(".mdl-layout__tab:eq(0) span").click ();
于 2015-09-23T01:22:50.487 回答
1

使用 mdl (@version 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 上测试

于 2016-12-06T06:23:15.790 回答
1

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

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

于 2015-07-13T00:00:24.140 回答
0

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

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

于 2018-02-20T06:58:02.390 回答
0

使用 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();
});
于 2017-12-11T02:01:46.270 回答
0

它为我工作

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

于 2018-06-29T07:44:25.457 回答