Question

我有一个网页，其内容布局如标记1,2,3（也适用于no-js））虽然视觉，我希望它是2,3,1。

我正在使用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>

任何人都有更好的主意吗？

Answer 1

尝试在这三个元素之后立即执行JavaScript：

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

当然，这会污染您的HTML，但无论如何，它比隐藏整个body元素更好（页面会在某些旧浏览器中闪烁）。

使用Javascript设计元素而不被注意到

1 个答案: