Question

以下代码无法正常运行：

编辑：
很抱歉误解了，我简化了我的问题，这是我面临的真正问题：http://jsfiddle.net/bc6hr/

<击>

<击>

HTML：

<div id="1">div 1</div>
<div id="2">div 2</div>

CSS：

div {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: white;
}
#1 {
    z-index: 2;
}

JS（jQuery）：

$("div").hide();
$("#1").show();
$("#2").show();

<击>

我必须遗漏一些东西，因为据我所知，这段代码应该显示“div 1”淡入“div 2”，但它实际上是从头开始渲染“div 2”。
我怎么能让它显示“div 1”知道我之前必须隐藏所有div？我认为使用z-index是一个很好的尝试，但也许我错了......

Answer 1

首先，您的id属性无效。您无法使用数字启动ID。

更新了您的jsfiddle。

Answer 2

~~问题是，1和2不是有效ID。因此，jQuery或CSS解析器都无法识别该元素。使用a和b代替其工作：http://jsfiddle.net/mBWcM/1/~~

问题是，当你在JavaScript中调用z-index更改时，div甚至不存在（代码存在于head元素中并立即执行）。请参阅fiddler page's source。

解决方法：在“开始，当DOM准备就绪”构建时接受所有内容：

jQuery(document).ready(function () {
   // your code here
});

编辑：实际上，我认为这是一个jsFiddle问题。当我重新加载页面一次或两次时，会发生“div1”仍然可见，其他时候，它是“div2”。我刚才看到，jsFiddle indead将代码包装在window.onload等价物中。

Answer 3

将您的ID更改为有效的ID（ no starting with numbers ）

Answer 4

我认为id不能以数字开头。当div的id变为d1和d2时，它们可以工作：