用js+css+div实现换图，类似网站换皮肤，求完整、简单的代码谢谢
就这些分了，谢谢帮助。具体说明：点击下边的链接，更换对应的背景图片，写在一个页面里边源代码如下<html><head><metahttp-equiv="Content-T...
就这些分了，谢谢帮助。
具体说明：点击下边的链接，更换对应的背景图片，写在一个页面里边
源代码如下
<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> 展开
具体说明：点击下边的链接，更换对应的背景图片，写在一个页面里边
源代码如下
<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> 展开
1个回答
展开全部
<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;
就行了
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
