Question

我正在使用布局组件页面中的mdl tabbar。

  <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>

我是否必须添加/删除＆＃34; is-active＆＃34;选项卡/面板上的类或是否有更简单的方法以编程方式选择选项卡？

Answer 1

您可以使用DOM元素上的Click（）方法模拟Click事件。

的document.getElementById（＆＃34; AnchorTagId＆＃34）。单击（）

Answer 2

您可以使用jquery

模拟标签按钮中的点击

ex（以编程方式激活第二个标签 - 索引1）：

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

ex（以编程方式激活第一个标签 - 索引0）：

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

Answer 3

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

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

Answer 4

使用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

上测试

Answer 5

包含上一个/下一个功能的jQuery解决方案：

 Context ctx = new InitialContext();

Object o = ctx.lookup("RiskAssessmentRouterManagerBean");

Answer 6

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

但自2016年12月以来尚未发布

Answer 7

它为我工作

$（'＃tabid'）。tabs（'select'，'select-Id'）;

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

7 个答案: