我正在使用布局组件页面中的 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”类,还是有更简单的方法来以编程方式选择选项卡?
最佳答案
据我所知,手动更改 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');
关于material-design-lite - 如何以编程方式选择选项卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31366212/