javascript - MDL 选项卡加载问题

Question

在我的网站 ( Link )(通过 Google 运行 MDL)中，我遇到了一个恼人的问题，您可以在 #harule 选项卡消失之前看到它一会儿。该选项卡没有属性 is-active，并且应该隐藏在页面上，直到您单击 harule 选项卡。有没有解决这个问题的方法，无论是 MDL 还是普通的 HTML、CSS、JS？

额外信息:每个人在/about/allPeople 中都有自己的文件。尝试/about/allPeople/qualexgaming.php。然后将这些文件包含在/about/index.php 文件中。

Answer 1

这是因为选项卡是在页面准备好时构建的，并且元素是在页面渲染时创建的(即选项卡之前)

由于 MDL 脚本负责生成选项卡，因此这只能通过解决方法来实现

将此样式和脚本标记添加到您的源中。

        <style id="tempStyle">#harule{display:none;}</style>
         //tab code goes here 
        <script>document.addEventListener("DOMContentLoaded", function (event) {
                   setTimeout(function (e) {
                      document.getElementById("tempStyle").remove();
                   }, 1000);
                });</script>