material-components-web - Material Component Web - MDCTab - 如何在 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
功能来激活选项卡。为此,您需要顶部栏实例。有关mdc-auto-init
说明您可以通过元素获取组件实例的文档:
一旦
mdc.autoInit()
被调用,您就可以通过MDCTextField
该元素上的属性访问组件实例。
在您的情况下,结果如下:
var element = document.querySelector('[data-mdc-auto-init="MDCTabBar"]');
elem.MDCTabBar.activateTab(1);
推荐阅读
- r - sparklyr spark_read_parquet 来自 s3 错误
- python - 当nodejs产生子进程时python找不到pip安装的库
- c# - 对象列表
在 RAM 上占用太多内存 - multithreading - 你如何在颤动的另一个线程上运行操作?
- django - How to provide autocomplete street addresses functionality in django?
- reactjs - 根据下拉菜单中的对象选择更新状态
- java - ZGC 是否使用更多共享内存?
- u-boot - 如何将C中的全局变量值设置为shell环境变量?
- laravel - Laravel 任务调度如何在不保留最后完成日期的情况下工作?
- c# - 如何在 Xamarin.Android 中获取 AlarmManager 系统服务