我有以下 HTML 代码:

<div class="mailTabs mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">TAB1</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">TAB2</a>
<a href="#scroll-tab-3" class="mdl-layout__tab">TAB3</a>
</div>

加载页面时，每个选项卡如下所示: <a href="#scroll-tab-1" class="mdl-layout__tab">TAB1<span class="mdl-layout__tab-ripple-container mdl-js-ripple-effect" data-upgraded=",MaterialRipple">等

当我尝试动态添加一些额外的选项卡时，它们不会收到相同的类和额外的东西来使它们看起来像我的“原始硬编码选项卡”。

我动态添加标签的代码如下:

var tabElement ='<a href="#scroll-tab-4" class="mdl-layout__tab"></a>';
$(tabElement).appendTo($('.mailTabs'));

我尝试使用 componentHandler.upgradeDom(); or componentHandler.upgradeElement('MaterialTabs','mdl-js-tabs');但似乎没有任何东西可以更新我动态添加的元素。

我错过了什么？

JSFiddle here

最佳答案

这是一个旧的 jQuery 代码，但它可以工作。它创建了选项卡，但它不可见。添加就可以看到:

TAB4

作为标签的内部文本

<a>

这是只有 TAB4 更改的行:

var tabElement ='<a href="#scroll-tab-4" class="mdl-layout__tab">TAB4</a>';

https://stackoverflow.com/questions/33475444/