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”类，还是有更简单的方法来以编程方式选择选项卡？

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');