首页 > 代码库 > 点击切换背景图片
点击切换背景图片
<!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>
<!--jquery.js需要自己下载哦-->
<script language="JavaScript" src="http://www.mamicode.com/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 id="body">
<div class="logo"><img src="http://www.mamicode.com/images/loginlogo.png" class="top_img"></div>
<div class="top">
<ul class="top_middle">
<li><a href="http://www.mamicode.com/#" class="active"><img src="http://www.mamicode.com/images/icon01.png" title="工作台" /><h1>工作台</h1></a></li>
<li><a href="http://www.mamicode.com/#" target="rightFrame"><img src="http://www.mamicode.com/images/icon02.png" title="模型管理" /><h1>模型管理</h1></a></li>
<li><a href="http://www.mamicode.com/#" target="rightFrame"><img src="http://www.mamicode.com/images/icon03.png" title="模块设计" /><h1>模块设计</h1></a></li>
<li><a href="http://www.mamicode.com/#" target="rightFrame"><img src="http://www.mamicode.com/images/icon04.png" title="常用工具" /><h1>常用工具</h1></a></li>
<li><a href="http://www.mamicode.com/#" target="rightFrame"><img src="http://www.mamicode.com/images/icon05.png" title="文件管理" /><h1>文件管理</h1></a></li>
<li><a href="http://www.mamicode.com/#" target="rightFrame"><img src="http://www.mamicode.com/images/icon06.png" title="系统设置" /><h1>系统设计</h1></a></li>
</ul>
<!-- <div class="top_right">
<ul>
<li><span><img src="http://www.mamicode.com/images/help.png" title="帮助" class="helpimg"/></span><a href="http://www.mamicode.com/#">帮助</a></li>
<li><a href="http://www.mamicode.com/#">关于</a></li>
<li><a href="http://www.mamicode.com/login.html" target="_parent">退出</a></li>
</ul>
</div>-->
</div>
</body>
</html>
图片没有办法显示哦，更换成自己所需样式就好啦
点击切换背景图片