Material Component Web - MDCTab - 如何在 javascript 中设置活动选项卡答案

【问题标题】：Material Component Web - MDCTab - How to set active tab in javascriptMaterial Component Web - MDCTab - 如何在 javascript 中设置活动选项卡
【发布时间】：2019-03-12 21:08:27
【问题描述】：

我有两个选项卡（TAB1 和 TAB2）。活动选项卡是 TAB1 (mdc-tab--active)。我想使用 javascript 将活动选项卡设置为 TAB2。

谢谢。

我的代码：

   <div class='mdc-tab-bar' role='tablist' data-mdc-auto-init='MDCTabBar'>
        <div class='mdc-tab-scroller'>
            <div class='mdc-tab-scroller__scroll-area mdc-tab-scroller__scroll-area--scroll'>
                <div class='mdc-tab-scroller__scroll-content'>
                    <button class='mdc-tab mdc-tab--stacked mdc-tab--active' role='tab' aria-selected='false' tabindex='-1'>
                        <span class='mdc-tab__content'>
                            <span class='mdc-tab__icon mdc-tab__icon-fa fa fa-comments fa-2x' aria-hidden='true'></span>
                            <span class='mdc-tab__text-label'>TAB1</span></span>
                        <span class='mdc-tab-indicator mdc-tab-indicator--active'>
                            <span class='mdc-tab-indicator__content mdc-tab-indicator__content--underline'></span>                                  
                        </span>
                        <span class='mdc-tab__ripple'></span>                               
                    </button>

                    <button class='mdc-tab mdc-tab--stacked b_mensajes_tabs_contactos' role='tab' aria-selected='true' tabindex='1'>
                        <span class='mdc-tab__content'>
                            <span class='mdc-tab__icon mdc-tab__icon-fa fa fa-user-circle fa-2x' aria-hidden='true'></span>
                            <span class='mdc-tab__text-label'>TAB2</span></span>
                        <span class='mdc-tab-indicator'>
                            <span class='mdc-tab-indicator__content mdc-tab-indicator__content--underline'></span>                                  
                        </span>
                        <span class='mdc-tab__ripple'></span>                               
                    </button>
                </div>
            </div>
        </div>
    </div>
.....
<script>
window.mdc.autoInit ();
</script>

我正在使用最新版本的 material-components-web

https://unpkg.com/material-components-web@latest/dist/material-components-web.css

https://unpkg.com/material-components-web@latest/dist/material-components-web.js

【问题讨论】：

标签： material-components-web

【解决方案1】：

您可以使用activateTab 函数来激活选项卡。为此，您需要顶部栏实例。 mdc-auto-init 上的文档指出可以通过元素获取组件实例：

一旦调用了mdc.autoInit()，您就可以通过该元素上的MDCTextField 属性访问组件实例。

在你的情况下，结果如下：

var element = document.querySelector('[data-mdc-auto-init="MDCTabBar"]');
elem.MDCTabBar.activateTab(1);

【讨论】：

【解决方案2】：

   <div id='idofdiv' class='mdc-tab-bar' role='tablist' data-mdc-auto-init='MDCTabBar'>
.....
  </div>

window.mdc.autoInit();
var element = document.querySelector('#idofdiv');
element.MDCTabBar.activateTab(1);

谢谢 ikkuh

【讨论】：