Material 组件 Web - MDCTab - 如何在 javascript 中设置活动选项卡
Material Component Web - MDCTab - How to set active tab in javascript
我有两个选项卡(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
您可以使用 activateTab
function to activate a tab. For this you need the top bar instance. The documentation on mdc-auto-init
声明您可以通过元素获取组件实例:
Once mdc.autoInit()
is called, you can access the component instance via an MDCTextField
property on that element.
在您的情况下,结果如下:
var element = document.querySelector('[data-mdc-auto-init="MDCTabBar"]');
elem.MDCTabBar.activateTab(1);
<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
我有两个选项卡(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
您可以使用 activateTab
function to activate a tab. For this you need the top bar instance. The documentation on mdc-auto-init
声明您可以通过元素获取组件实例:
Once
mdc.autoInit()
is called, you can access the component instance via anMDCTextField
property on that element.
在您的情况下,结果如下:
var element = document.querySelector('[data-mdc-auto-init="MDCTabBar"]');
elem.MDCTabBar.activateTab(1);
<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