点击切换背景图片

<!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>top</title>

<script language="JavaScript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   //顶部导航切换
        $('.top_middle li a').click(function(){
       $('.top_middle li a').removeClass('active')
       $(this).addClass("active");
       });
   });
</script>
<style type="text/css">
*{font-size:14px;border:0;margin:0;padding:0;}
body{font-family:'微软雅黑'; margin:0 auto; min-width:980px;}
ul{display:block;margin:0;padding:0;list-style:none;}
li{display:block;margin:0;padding:0;list-style:none;color:#FFF;}
img{border:0;}
a:hover{color:#00a4ac;text-decoration:none;}
h1{ color:#FFF; font-weight:500px; text-align:center;}
/*dl,dt,dd,span{margin:0;padding:0;display:block;}
a,a:focus{text-decoration:none;color:#000;outline:none;blr:expression(this.onFocus=this.blur());}
table{border-collapse:collapse;border-spacing: 0;}
cite{font-style:normal;}*/
.logo{height:88px; width:300px; float:left; background:url(images/topleft.jpg) left no-repeat;}
.logo img{ padding-top:10px; padding-left:10px;}
.top{width:100%; height:88px; background:url(images/topbg.gif) center repeat;}
.top_middle{float:left; height:88px;}
.top_middle li{width:87px; height:88px; float:left; display:block; }
.top_middle a{width:87px; display:block;vertical-align:middle; height:88px;text-decoration:none; }
.top_middle li a:hover{display:block; background-color:repeat scroll 0% 0% rgb(43, 127, 181); height:88px; background:url(images/navbg.png) center no-repeat;}
.active{ height:88px; background:url(images/navbg.png) center no-repeat;}
.top_middle li a img{ margin-top:10px; margin-left:20px;}
/*.top_right ul li{float:left; padding-left:9px; padding-right:9px; background:url(images/line.gif) no-repeat right;}
.top_right ul li a{font-size:13px; color:#e9f2f7; text-decoration:none;}
.top_right ul li a:hover{color:#fff;}
.top_right ul li span{margin-top:2px;float:left;padding-right:3px;}*/
</style>
</head>
<body >退出</a></li>
    </ul>
</div>-->
</div>
</body>
</html>

图片没有办法显示哦，更换成自己所需样式就好啦
点击切换背景图片