顯示問題：沒有爲某些ajax內容和javascript切換功能

在我的網站上，我試圖將我所有的內聯樣式合併到外部的css文件中。我注意到我的7次主要的網頁我已經數以百計的直列style="display:none"報表的，所以我想我會刮鬍子一些KB了我的文件通過添加類我外部樣式表如下：顯示問題：沒有爲某些ajax內容和javascript切換功能

.DN { 
    display:none; 
}

在我7頁，用class="DN"替換每個內聯style="display:none"削減大約5kB總數（合併爲7頁）。但是，有一些地方失敗了。例如，在一個頁面上，用戶可以通過在display:none div之間切換（每個div設置爲display:none ...除了#div1，在用戶轉到此頁面時默認設置爲可見），在鼠標單擊之間選擇菜單選項下面的函數（toggle(layer)在其他網頁元素的每個鼠標點擊的叫法）：

function toggle(layer) { 
    var divs = ["div1", "div2", "div3", "div4", "div5", "div6", "div7", "div8", "div9",  
    "div10", "div11"]; 
    for (var i = 0; i < divs.length; i += 1) { 
     document.getElementById(divs[i]).style.display = 'none'; 
    } 
    document.getElementById(layer).style.display = ''; 
} 


<div id="div1" style="visibility:visible">More HTML here</div> 
<div id="div2" style="display:none">More HTML here</div> 
//9 more display:none divs...success

然而，當格樣式改爲class="DN"（class="DN"取代style="display:none"），股利的行爲，如果DN類是沒有即使在那裏。我最近在網站上遇到了一些類似Ajax加載內容的問題。

<div id="div2" class="DN">More HTML here</div> 
//Fail...div does not appear upon mouseclick of menu buttons

我認爲外部CSS文件應該設置所有DOM元素的樣式。作爲旁註，我檢查了一下，以確保在我的外部文件中沒有衝突的css樣式元素...我沒有看到任何衝突（例如，如果我的其他div在外部CSS文件中有visibility:visible樣式，等等）。出於好奇，通過設置class="DN"而不是內聯style="display:none"，可能會出現什麼問題？

來源

2014-02-12 The One and Only ChemistryBlob

您是否考慮過正確配置的服務器發送gzip CSS和HTML文件的事實？這並不意味着你不應該使用課堂，但文件大小的增益可能不是那麼重要。 –

這聽起來像你的CSS沒有正確應用。你所描述的應該起作用。 – Halcyon

您可以在小提琴中重現您的問題嗎？這裏有太多的漏洞。 –

修復它當您設置document.getElementById(layer).style.display = '';顯示爲空字符串，將CSS仍在通過樣式表應用。如果您想覆蓋樣式表，在這種情況下，您可能需要將該行更新爲document.getElementById(layer).style.display = 'block';。

來源

2014-02-12 17:42:40 dward

是否有更具體的display樣式適用於未按預期工作的div？例如

<div id="div2" class="DN">More HTML here</div>

，如果你在你的樣式表#div2 {display:block;}或#div2 {display:inline;}，加入.DN {display:none;}不會有任何作用，而含量display:none;內嵌樣式會。如果是這樣的話，你可以用!important

.DN { display:none !important; }

來源

2014-02-12 16:47:21 willanderson

不，我真的很小心這個...沒有壓倒一切的CSS。實際上，問題在於空字符串....用@dward建議替換爲'block' –

顯示問題：沒有爲某些ajax內容和javascript切換功能

回答

相關問題