用js+css+div实现换图，类似网站换皮肤，求完整、简单的代码谢谢

就这些分了，谢谢帮助。
具体说明：点击下边的链接，更换对应的背景图片，写在一个页面里边
源代码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 23px;
color: #999;
background-color: #FCF;
}
.aaa{
background-image: url(aaa.png);
height: 312px;
width: 440px;position: relative;
}
.bbb{
background-image: url(bbb.png);
height: 312px;
width: 440px;position: absolute;
}
.ccc{
background-image: url(ccc.png);
height: 312px;
width: 440px;position: absolute;
}
</style>
</head>
<body>
<div class="aaa">
<div class="bbb"></div>
<div class="ccc"></div>
</div>
<div class="">
<ul>
<li><a href="#">aaa1</a></li>
<li><a href="#">aaa2</a></li>
<li><a href="#">aaa3</a></li>
<li></li>
<li><a href="#">bbb1</a></li>
<li><a href="#">bbb2</a></li>
<li><a href="#">bbb3</a></li>
<li><a href="#">bbb4</a></li>
<li></li>
<li><a href="#">ccc1</a></li>
<li><a href="#">ccc2</a></li>
<li><a href="#">ccc3</a></li>
</ul>
</div>
</body>
</html>

举报该问题

推荐答案 2013-12-04

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 23px;
color: #999;
background-color: #FCF;
}
.aaa{
background-image: url(aaa.png);
height: 312px;
width: 440px;position: relative;
}
.bbb{
background-image: url(bbb.png);
height: 312px;
width: 440px;position: absolute;
}
.ccc{
background-image: url(ccc.png);
height: 312px;
width: 440px;position: absolute;
}
</style>
</head>
<body>
<div class="aaa">
<div class="bbb"></div>
<div class="ccc"></div>
</div>
<div id="bg" class="">
<ul>
<li><a href="javascript:cat('aaa1');">aaa1</a></li>
<li><a href="javascript:cat('aaa2');">aaa2</a></li>
<li><a href="#">aaa3</a></li>
<li></li>
<li><a href="#">bbb1</a></li>
<li><a href="#">bbb2</a></li>
<li><a href="#">bbb3</a></li>
<li><a href="#">bbb4</a></li>
<li></li>
<li><a href="#">ccc1</a></li>
<li><a href="#">ccc2</a></li>
<li><a href="#">ccc3</a></li>
</ul>
</div>
</body>
<script type="text/javascript">
function cat(cla)
{
var id=document.getElementById('bg');
id.setAttribute("class",cla);
}
</script>
</html>

追问

ie8下无反应，火狐下效果不错，就是我要的效果，能不能兼容一下ie浏览器，谢谢

追答

将
id.setAttribute("class",cla);
改成

id.className=cla;
就行了

温馨提示：答案为网友推荐，仅供参考

当前网址：http://66.wendadaohang.com/zd/p9p2DUxisUsUss2U2D.html

相似回答

大家正在搜