動態加載內容的div，但頂部的CSS樣式不適用

-1

我在main.html動態加載內容的div，但頂部的CSS樣式不適用

<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是loade d由$("#main-display").load()，其css風格沒有應用。 MDL選項卡功能不起作用。

來源

2017-01-03 VincentHuang

您是否試過僅使Tab中的一個「is-active」？ –

[我正在使用jquery加載一個新的html文件，但css不工作]的可能的重複（http://stackoverflow.com/questions/31283893/i-am-using-jquery-load-a-new-html -file-but-css-doesnt-work）請看這個答案：http://stackoverflow.com/a/31288866/2893691 – Dave

我認爲問題是不同的。加載的HTML內容在我的情況下使用相同的CSS。 – VincentHuang

最後，我想出一個解決方案通過在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"爲製表如下。

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

然後，當我動態加載tabs.html，其MDL CSS被正確地應用。

來源

2017-01-03 15:01:03 VincentHuang

動態加載內容的div，但頂部的CSS樣式不適用

回答

相關問題