DIV显示问题

代码如下:<div id="aa">
            <img src="pic/yw_1.jpg" />
            <img src="pic/zw_1.jpg" />
        </div>
<div id="bb" style="visibility:hidden">
            <img src="pic/yw_2.jpg" />
            <img src="pic/zw_2.jpg" />
        </div>
body的onload事件(给DIV加背景图片)
document.getElementById("aa").style.backgroundImage="url("+"<%=pic1%>"+")";
document.getElementById("bb").style.backgroundImage="url("+"<%=pic2%>"+")";
pic1和pic2是后台的两个值有一个button事件
document.getElementById("aa").style.visibility="hidden";
document.getElementById("bb").style.visibility="inherit";先显示aa,当我按button时显示bb,但是显示bb时,程序是先显示它里面的2个图片的,怎么能让它先显示本身的背景,然后再显示它里的内容?
还有就是div的显示顺序是什么?

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

先把背景图片(层)放到最前面,然后再放到内容的后面  z-index
先把背景图片(层)放到最前面,然后再放到内容的后面  z-index
应该到Html(CSS)版块去提问.
那我的DIV里要有很多东西,这样就会太麻烦了
代码:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">
    .divinfo
    {
        width:200px;
        height:200px;
        position:absolute;
        top:50px;
        left:50px;
    }
    </style>

    <script type="text/javascript">
    function sel(obj)
    {
        var s=document.getElementById(obj);
        for(var i=1;i<=s.length;i++)
        {
            if(s.options[i-1].selected){
                document.getElementById("div"+i).style.visibility="inherit";
            }else{document.getElementById("div"+i).style.visibility="hidden";}
        }
    }
    function load()
    {
        document.getElementById("div1").style.backgroundImage="url("+" <%=pic1%>"+")";
        document.getElementById("div2").style.backgroundImage="url("+" <%=pic2%>"+")";
        document.getElementById("div3").style.backgroundImage="url("+" <%=pic3%>"+")";
        document.getElementById("div4").style.backgroundImage="url("+" <%=pic4%>"+")";
        sel("Select1");
    }
    </script>
</head>
<body onload="load()">
    <form id="form1" runat="server">
    <div>
        <select id="Select1" onchange="sel(this.id)">
            <option selected="selected" value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </div>
    <div id="div1" class="divinfo">
        <img src="pic/nr1.jpg" />
        <img src="pic/pd.jpg" />
    </div>
    <div id="div2" class="divinfo" style="visibility:hidden;">
        <img src="pic/nr2.jpg" />
    </div>
    <div id="div3" class="divinfo" style="visibility: hidden;">
        <img src="pic/nr3.jpg" />
    </div>
    <div id="div4" class="divinfo" style="visibility: hidden;">
        <img src="pic/nr4.jpg" />
    </div>
    </form>
</body>
</html>当显示下一个DIV时,总是会先显示DIV里面的内容,不会先显示DIV的背景,
我就是想先显示DIV的背景,再显示它的内容
不能用z-index这样,因为div里可能会有很多内容
是我没写明白吗?这断代码我是在CPU频率400的winCE系统上运行就会出现我所说的效果,在其他电脑上不明显
显示div时，先把div里面的图片隐藏起来然后使用一个setTimeout定时器在一定时间后显示这个div里面的图片
因为每个DIV里的图片数量不同,要显示的图片也不同,用一个for循环能解决吗?
在下面的事件中你在再对div bb里面的img的src赋值一边测试一下：
body的onload事件
document.getElementById("aa").style.backgroundImage="url("+" <%=pic1%>"+")";
document.getElementById("bb").style.backgroundImage="url("+" <%=pic2%>"+")"; 还有啊，是不是你的背景图片比 bb里面的img图片还要大啊？要是这样的话，就没办法了，大的下载慢啊
参考obj.getElementsByTagName("标签名称")，这个返回一个数组，大概改了下，你自己根据需要改改function ShowHideIMG(obj,vis){
  var imgs=obj.getElementsByTagName("img");
  for(var i=0;i<imgs.length;i++)imgs[i].style.visibility=vis;
}
    function sel(obj)
    {
        var s=document.getElementById(obj);
        for(var i=1;i <=s.length;i++)
        {
            if(s.options[i-1].selected){
                document.getElementById("div"+i).style.visibility="inherit";
                ShowHideIMG(document.getElementById("div"+i),"hidden");//先隐藏
setTimeout(function(){ShowHideIMG(document.getElementById("div"+i),"inherit");},1000);//使用setTimeout在1秒后再显示图片
            }else{
               document.getElementById("div"+i).style.visibility="hidden";
           }
        }
    }