Question

我在main.html

中有以下代码

<link rel="stylesheet" href="static/css/material.cyan-light_blue.min.css">
<link rel="stylesheet" href="static/css/styles.css">
<script src="static/js/jquery-3.1.1.min.js"></script>
<script src="static/js/material.min.js"></script>
<script src="static/js/main.js"></script>

<main class="mdl-layout__content mdl-color--grey-100">
<div id="main-display" class="mdl-grid demo-content">
</div>
</main>

在main.js，

$(document).ready(function() {
    $("#main-display").load(
        "static/tabs.html",
        function() { $("#main-display").trigger("create");
    });
});

在tabs.html，我有

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
    <a href="#tab1" class="mdl-tabs__tab is-active">Tab1</a>
    <a href="#tab2" class="mdl-tabs__tab is-active">Tab2</a>
    <a href="#tab3" class="mdl-tabs__tab is-active">Tab3</a>
</div>

问题是当tabs.html加载$("#main-display").load()时，其css样式未应用。 MDL选项卡功能不起作用。

Answer 1

最后，我通过修改main.js

找出了如下解决方案

$(document).ready(function() {
    $("#main-display").load(
        "static/tabs.html",
        function() {
            var tabs = document.getElementById("div-js-tabs");
            componentHandler.downgradeElements(tabs);
            componentHandler.upgradeElements(tabs);
        }
    );
});

将id="div-js-tabs"添加到tabs.html。

中的标签页

<div id="div-js-tabs" class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">

然后，当我动态加载tabs.html时，其MDL css已正确应用。

动态地将内容加载到div但未应用顶级css样式

1 个答案: