Question

我有一个材质设计精简页面，使用以单个标签开头的标签式布局。我有一个菜单操作，添加了一个额外的选项卡。 JavaScript代码添加了所需的＆lt; a＆gt;标签和内容到＆lt; header＆gt;中的标签栏并附加相关的＆lt;部分＆gt;和内容＆lt; div＆gt;到＆lt; main＆gt;标签。
然后，JavaScript代码为两个添加项的父元素调用componentHandler.upgradeElement（）函数。

表面上这是有效的，新标签显示在标题中，新内容＆lt; div＆gt;可以通过单击选项卡显示。但是，单击原始选项卡会显示“升级”不完整。标签栏中的两个元素有些不同，都有“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>

两个＆lt;部分＆gt;元素是应该的，但与新引入的选项卡相关的部分没有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);

以编程方式添加MDL选项卡

1 个答案: