以编程方式添加 MDL 选项卡

Question

我有一个 Material Design lite 页面，它使用以单个选项卡开头的选项卡式布局。我有一个添加附加选项卡的菜单操作。 JavaScript 代码将所需的 标记和内容添加到

中的选项卡栏，并将相关的

和内容

附加到

标记。
JavaScript 代码然后为两个添加的父元素调用 componentHandler.upgradeElement() 函数。

表面上这是可行的，新标签显示在标题中，新内容

可以通过单击标签来显示。但是，单击原始选项卡表明“升级”不完整。标签栏中的两个元素有些不同，都具有“is-active” CSS 类。

<div class="mdl-layout__tab-bar-container">
  <div class="mdl-layout__tab-bar mdl-js-ripple-effect is-casting-shadow mdl-js-ripple-effect--ignore-events" id="hdrTabs" data-upgraded=",MaterialRipple">
    <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Checklists<span class="mdl-layout__tab-ripple-container mdl-js-ripple-effect" data-upgraded=",MaterialRipple"><span class="mdl-ripple is-animating" style="width: 1475.13px; height: 1475.13px; transform: translate(-50%, -50%) translate(349px, 31px);"></span></span></a>
    <a class="mdl-layout__tab is-active" href="#scroll-tab-2">New Checklist</a>
  </div>
</div>

这两个

元素应该是这样，但是与新引入的选项卡相关的部分没有 display: none CSS 属性，因此内容在原始选项卡的内容下可见。

是从我自己的代码库中管理以编程方式添加的选项卡的唯一解决方案吗？

【问题讨论】：

Answer 1

有两点需要考虑。

• 必须为 MDL 组件元素调用upgradeElement。在您的情况下，类为mdl-js-tabs 的div。 也许这就是你正在做的（JavaScript 代码然后为两个添加的父元素调用 componentHandler.upgradeElement() 函数。）
• 由于mdl-js-tabs 的div 已经注册，您需要在调用upgradeElement 之前调用downgradeElements。

因此应该执行以下操作：

var jstabs  = document.getElement /with mdl-js-tabs/;
componentHandler.downgradeElements(jstabs);
componentHandler.upgradeElement(jstabs);