JS改变DIV背景图（求助）

各位大哥，小弟在网上下载了一个《jQuery缓慢弹出下拉菜单》。想稍微修改一下：在鼠标滑过导航的菜单时（比如这个例子有三个按钮：公司概况 | 产品展示 | 新闻动态）下滑的子菜单层，分别显示不同的背景图片（比如：1.png | 2.png | 3.png）尝试了好多次老是失败，万望帮助，非常感谢。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery缓慢弹出下拉tab导航</title><link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js">
<style type="text/css"></script>
</head><body><div class="nav_menu">
<div class="nav">
<div class="list" id="navlist">
<ul id="navfouce">
<li><a href=#>公司概况</a></li>
<li><a href=#>产品展示</a></li>
<li><a href=#>新闻动态</a></li>
</ul>
</div>
<div class="box" id="navbox" style="height:0px;opacity:0;overflow:hidden;">
<div class="cont" style="display:none;">
                       公司概况-菜单内容
</div>
<div class="cont" style="display:none;">
产品展-菜单内容
</div>
<div class="cont" style="display:none;">
            新闻动态-菜单内容
</div>
</div>
</div>
</div>
<script type="text/javascript">(function(){ var time = null;
var list = $("#navlist");
var box = $("#navbox");
var lista = list.find("a");

for(var i=0,j=lista.length;i<j;i++){
if(lista[i].className == "now"){
var olda = i;
}
}

var box_show = function(hei){
box.stop().animate({
height:hei,
opacity:1
},400);

}

var box_hide = function(){
box.stop().animate({
height:0,
opacity:0
},400);
}

lista.hover(function(){
lista.removeClass("now");
$(this).addClass("now");
clearTimeout(time);
var index = list.find("a").index($(this));
box.find(".cont").hide().eq(index).show();
var _height = box.find(".cont").eq(index).height()+20;
box_show(_height);

},function(){
time = setTimeout(function(){
box.find(".cont").hide();
box_hide();
},50);
lista.removeClass("now");
lista.eq(olda).addClass("now");

});

box.find(".cont").hover(function(){
var _index = box.find(".cont").index($(this));
lista.removeClass("now");
lista.eq(_index).addClass("now");
clearTimeout(time);
$(this).show();
var _height = $(this).height()+20;
box_show(_height);

},function(){
time = setTimeout(function(){
$(this).hide();
box_hide();
},50);
lista.removeClass("now");
lista.eq(olda).addClass("now");

});})();
</script></body></html>
CSS文件
@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180%, "新宋体";background:#006400;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-table}
*html .clearfix{height:1%}
.clearfix{display:block}
*+html .clearfix{min-height:1%}
/* nav_menu */
.nav_menu{height:42px;background:#f00;}
.nav{width:375px;height:42px;position:relative;margin:0 auto;background:#000;}
.nav .list li{float:left;}.nav .list a{float:left;display:block;width:125px;height:42px;text-align:center;font:bold 13px/36px "微软雅黑";color:#fff;}
.nav .list a:hover,.nav .list .now{color:#F00;background:#ff0;}.nav .box{position:absolute;right:0px;top:42px;width:870px;overflow:hidden;height:0;filter:alpha(opacity=0);opacity:0;}
.nav .cont{position:relative;}
/* sublist */.sublist li{ 
float:left; 
display: inline; 
position:relative; 
} DIV背景自动更改

解决方案 »

  1.   

    直接用css 来设置实现<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery缓慢弹出下拉tab导航</title><link type="text/css" href="css/style.css" rel="stylesheet" />
     
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style type="text/css">
      @charset "utf-8";  *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;text-decoration:none;}
    body{font:12px/180%, "新宋体";background:#006400;}
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .clearfix{display:inline-table}
    *html .clearfix{height:1%}
    .clearfix{display:block}
    *+html .clearfix{min-height:1%}
    /* nav_menu */
    .nav_menu{height:42px;background:#f00;}
    .nav{width:375px;height:42px;position:relative;margin:0 auto;background:#000;}
    .nav .list li{float:left;}.nav .list a{float:left;display:block;width:125px;height:42px;text-align:center;font:bold 13px/36px "微软雅黑";color:#fff;}
    .nav .list a:hover,.nav .list .now{color:#F00;background:#ff0;}.nav .box{position:absolute;right:0px;top:42px;width:870px;overflow:hidden;height:0;filter:alpha(opacity=0);opacity:0;}
    .nav .cont{position:relative;}
    /* sublist */.sublist li{ 
    float:left; 
    display: inline; 
    position:relative; 
    } /** 背景设置  */
    .cont{
     background:url(http://img2.cache.netease.com/www/v2013/img/bg_fmail_v3.png);
     height:38px;
    }
    .c1{

    }
    .c2{
    background-position-y: -40px;
    }
    .c3{
    background-position-y: 40px;
    }
     

    </style>
    </head><body><div class="nav_menu">
    <div class="nav">
    <div class="list" id="navlist">
    <ul id="navfouce">
    <li><a href=#>公司概况</a></li>
    <li><a href=#>产品展示</a></li>
    <li><a href=#>新闻动态</a></li>
    </ul>
    </div>
    <div class="box" id="navbox" style="height:0px;opacity:0;overflow:hidden;">
    <div class="cont c1" style="display:none;">
                           公司概况-菜单内容
    </div>
    <div class="cont c2" style="display:none;">
    产品展-菜单内容
    </div>
    <div class="cont c3" style="display:none;">
                新闻动态-菜单内容
    </div>
    </div>
    </div>
    </div>
    <script type="text/javascript">(function(){ var time = null;
    var list = $("#navlist");
    var box = $("#navbox");
    var lista = list.find("a");

    for(var i=0,j=lista.length;i<j;i++){
    if(lista[i].className == "now"){
    var olda = i;
    }
    }

    var box_show = function(hei){
    box.stop().animate({
    height:hei,
    opacity:1
    },400);

    }

    var box_hide = function(){
    box.stop().animate({
    height:0,
    opacity:0
    },400);
    }

    lista.hover(function(){
    lista.removeClass("now");
    $(this).addClass("now");
    clearTimeout(time);
    var index = list.find("a").index($(this));
    box.find(".cont").hide().eq(index).show();
    var _height = box.find(".cont").eq(index).height()+20;
    box_show(_height);

    },function(){
    time = setTimeout(function(){  return 
    box.find(".cont").hide();
    box_hide();
    },50);
    lista.removeClass("now");
    lista.eq(olda).addClass("now");

    });

    box.find(".cont").hover(function(){  return 
    var _index = box.find(".cont").index($(this));
    lista.removeClass("now");
    lista.eq(_index).addClass("now");
    clearTimeout(time);
    $(this).show();
    var _height = $(this).height()+20;
    box_show(_height);

    },function(){
    time = setTimeout(function(){
    $(this).hide();
    box_hide();
    },50);
    lista.removeClass("now");
    lista.eq(olda).addClass("now");

    });})();
    </script></body></html>
      

  2.   

    这种功能 css就能实现了吧   楼上正解
      

  3.   

    呵呵，我跟着牛人fzfei2一路看过来，学了不少东西，收下了。