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

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>

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

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").点击()

Answer 3

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

ex(以编程方式激活第二个选项卡 - 索引1):

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

ex(以编程方式激活第一个选项卡 - 索引0):

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

Answer 4

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

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