帶有Javascript的樣式元素而沒有被注意到

我有一個網頁，其內容佈局像標記中的1,2,3一樣（也用於no-js ），而用於視覺我希望它是2,3,1。帶有Javascript的樣式元素而沒有被注意到

我正在使用Javascript（jQuery）交換自己的位置。但問題是，JavaScript代碼是在頁面加載後執行的，因此可以明顯看到交換過程。

我現在能想到的唯一解決方案就是在交換完成後首先隱藏全身並恢復身體。

$(function() { 
    $("#div2, #div3").insertBefore("#div1"); 
    $("body").css({display: "block"}); 
});

<body style="display: none;"> 
... 
<div id="div1">...</div> 
<div id="div2">...</div> 
<div id="div3">...</div> 
... 
<!-- in case JS is disabled, use css to restore --> 
<!-- style should not be here, that's why I said it's a bad one. --> 
<style type="text/css"> 
body {display: block !important;} 
</style> 
</body>

任何人有一個更好的主意嗎？

來源

2011-08-23 Q239

如果您最初隱藏身體，禁用JS的瀏覽器將無法看到任何內容。 – HyderA

爲什麼不直接隱藏DIV而不是整個身體？ – Blazemonger

@gAMBOOKa在JS被禁用的情況下，我確實包含了一種在之前恢復正文的樣式。但就像我說的那樣，這是對付W3規格的不好方法。 – Q239

嘗試這三個要素後立即執行JavaScript：

<div id="div1">...</div> 
<div id="div2">...</div> 
<div id="div3">...</div> 
<script type="text/javascript"> $("#div2, #div3").insertBefore("#div1"); </script>

當然，這是你的HTML的污染，但在任何情況下，它比隱藏整個body元素更好（頁面閃爍在一些舊的瀏覽器）。

來源

2011-08-23 17:25:18

謝謝你的無浮動，這工作，但...我說謊「_我有一個網頁_」，實際上有幾個（PHP）頁面...這意味着我必須污染每個頁面的HTML。不是混合腳本和內容，我決定讓交換成爲真正的動畫（幻燈片）。 – Q239

帶有Javascript的樣式元素而沒有被注意到

回答

相關問題