material-design-lite - 如何以编程方式选择选项卡？

Question

我正在使用布局组件页面中的 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”类，或者是否有更简单的方法来以编程方式选择选项卡？

score 12 · Accepted Answer

据我所知，手动更改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');

score 9 · Accepted Answer

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

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

score 6 · Accepted Answer

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

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

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

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

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

score 1 · Accepted Answer

使用 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 上测试

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

使用 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();
});

score 0 · Accepted Answer

0

它为我工作

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

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

material-design-lite - 如何以编程方式选择选项卡？

8 回答 8

Related

Reference