動的負荷のコンテンツは、

Question

を適用していなかった私はmain.jsで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> 

、

$(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がloadeの場合ですdは$("#main-display").load()で、そのCSSスタイルは適用されませんでした。 MDLタブの機能が動作しませんでした。 tabs.htmlのタブに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"を変更することによって、次のように

Answer 1

最後に、私は解決策を見つけ出します。私は動的にロードするとtabs.html

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

すると、そのMDLのCSSが正しく適用されました。