js怎么实现切换背景图片，像淘宝导航一样，切换的时候换个图标！
可以给div添加class 给class添加样式图片 点击div的时候添加一个class就可以了
当你点击购物车时购物车的图标改变，如果你的意思是这个的话那么就是设置点击事件，
思路是:为当前的点击项绑定单击事件，点击时改变图片路径或者引用的样式(大部分图片如图中所示的几个会有对应样式，效果比img好)，楼主看到速回，
我理解为两种情况
1.当你点击首页的时候，首页图标变红
2.当你点击首页的时候，首页图片更改为其他
所以不好为你解答
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<style>
/*a标签样式*/
a{
float: left;
width: 50px;
height: 50px;
border:1px solid lawngreen;
margin-left: 10px;
text-align: center;
line-height: 50px;
cursor: hand;
text-decoration: none;
}
.toRed{
background-color: red;
}
</style>
<title></title>
<!--用Jquery所以要引入这个-->
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//这是原生的JS代码实现
//文档加载时候执行
window.onload=function(){
//获取到所有的a标签 我的情况下这个适用一些 楼主最好给a标签写上name属性值
//此时aArray是个数组
var aArray = document.getElementsByTagName("a");
//遍历节点
for(var i in aArray){
//获取每个a标签并且绑定单击事件
aArray[i].onclick = function(){
//获取当前有toRed样式的节点 注意是个数组
var aDom = document.getElementsByClassName("toRed");
//下面两句是Jquery的知识了
//aDom[0]表示的是有toRed样式的节点
$(aDom[0]).removeClass("toRed");
//移除样式
$(this).addClass("toRed");
}
}
}
</script>
</head>
<body>
<!--如下为四个a标签按钮 -->
<a href="javascript:void(0);">1</a>
<a href="javascript:void(0);">2</a>
<a href="javascript:void(0);">3</a>
<a href="javascript:void(0);">4</a>
</body>
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<style>
/*a标签样式*/
a{
float: left;
width: 50px;
height: 50px;
border:1px solid lawngreen;
margin-left: 10px;
text-align: center;
line-height: 50px;
cursor: hand;
text-decoration: none;
}
/*用来添加的样式*/
.toRed{
background-color: red;
}
</style>
<title></title>
<!--用Jquery所以要引入这个-->
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//Jquery实现动态绑定单击事件为节点添加样式
//HTML文档加载完之后再执行Jquery
$(document).ready(function() {
//获取是所有的a标签 正常使用时建议大家为a标签写上name属性值
var aArray = $("a");
//这是遍历a标签数组，index表示a标签在aArray中的索引，element表示a标签节点本身
$(aArray).each(function(index,element){
//绑定单击事件
$(element).click(function(){
//获取已经有toRed样式的a标签节点 移除toRed样式
$("a[class='toRed']").removeClass("toRed");
//为a标签添加toRed样式
$(this).addClass("toRed");
//运行前给其中一个a标签添加一个toRed样式就更完美了
});
});
});
</script>
<script>
//为什么要用$(document).ready(function() {});作用是文档加载完毕之后执行
//很多时候尤其我们绑定事件会用到文档节点,所以必须等文档节点加载完毕之后再绑定,否则就会出现明明代码没错但是就是没有效果的情况
//大家可以去搜下其他人写的博客，看看他们的实验，我就不做多的探究了
</script>
</head>
<body>
<!--如下为四个a标签按钮 -->
<!--运行前给其中一个a标签添加toRed样式就更完美了 -->
<a class="toRed" href="javascript:void(0);">1</a>
<a href="javascript:void(0);">2</a>
<a href="javascript:void(0);">3</a>
<a href="javascript:void(0);">4</a>
</body>
我用的这样的背景图，根据位置去控制图标的显示，
但是我不知道怎么添加样式再去切换这几张图！