带有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的样式元素而没有被注意到

回答

相关问题