心塞啊，为毛我写完没效果，什么反应都没有
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>信息排列</title>
<script type="text/javascript">
window.onload = function(){
var listBtn = document.getElementById("btn1");
var carBtn = document.getElementById("btn2");
var imgs = document.getElemetsTagName("img");
var imges = imgs.length;
alert(imges);
listBtn.onclick = function(){
//改变按钮的class值
listBtn.className = "btn-list-on";
carBtn.className = "btn-car-off";
//改变图片路径以及父节点的class值
for( var i=0; i<=img.length(); i++){
img[i].src = " http://img1.sycdn.imooc.com//53ab7cf4000196c000500050.jpg";
img[i].parentNode.className = "a-img small";
}
}
}
</script>
<style>
*{ margin:0px; padding:0px}
body{ font-family:"微软雅黑"; font-size:14px;}
ul li{ list-style:none}
a{ text-decoration:none}
#box{ width:550px; height:auto; margin:0 auto; overflow:hidden}
.top{ height:40px;}
.top a{ width:16px; height:16px; dis play:block; float:right; margin:5px; }
.btn-list-off{ background:#FFFFFF url(images/53ab7e86000153cc00710057.jpg) no-repeat -38px 0px; }
.btn-car-on{ background:#FFFFFF url(images/53ab7e86000153cc00710057.jpg) no-repeat -20px -33px}
.btn-list-on{ background:#FFFFFF url(images/53ab7e86000153cc00710057.jpg) no-repeat -21px 0px; }
.btn-car-off{ background:#FFFFFF url(images/53ab7e86000153cc00710057.jpg) no-repeat -37px -32px}
#box ul li{border:1px solid #C80003; width:164px; height:auto ; float:left; margin:7px}
.a-img{ height:164px; width:164px; display:block; overflow:hidden;}
p span{ color:rgba(66,0,1,1.00);display:block; line-height:20px; padding-left:10px}
.bottom p{ color:#000000; background:rgba(191,191,191,1.00); text-align:center; height:30px; line-height:30px}
.small{ width:50px; height:50px; float:left; margin:5px; display:block;}
</style>
</head>
<body>
<div id="box">
<div class="top">
<a href="" title="列表模式" class="btn-list-off" id="btn1"></a>
<a href="" title="卡片模式" class="btn-car-on" id="btn2"></a>
</div>
<ul>
<li>
<div class="con">
<a href="" class="a-img"><img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/></a>
<p>
<span><a href="">白羊</a></span>
<span>辽宁</span>
<span>22个共同好友</span>
</p>
</div>
<div class="bottom">
<p>未分组的好友</p>
</div>
</li>
<li>
<div class="con">
<a href="" class="a-img"><img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/></a>
<p>
<span><a href="">白羊</a></span>
<span>辽宁</span>
<span>22个共同好友</span>
</p>
</div>
<div class="bottom">
<p>未分组的好友</p>
</div>
</li>
<li>
<div class="con">
<a href="" class="a-img"><img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/></a>
<p>
<span><a href="">白羊</a></span>
<span>辽宁</span>
<span>22个共同好友</span>
</p>
</div>
<div class="bottom">
<p>未分组的好友</p>
</div>
</li>
<li>
<div class="con">
<a href="" class="a-img"><img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/></a>
<p>
<span><a href="">白羊</a></span>
<span>辽宁</span>
<span>22个共同好友</span>
</p>
</div>
<div class="bottom">
<p>未分组的好友</p>
</div>
</li>
<li>
<div class="con">
<a href="" class="a-img"><img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/></a>
<p>
<span><a href="">白羊</a></span>
<span>辽宁</span>
<span>22个共同好友</span>
</p>
</div>
<div class="bottom">
<p>未分组的好友</p>
</div>
</li>
<li>
<div class="con">
<a href="" class="a-img"><img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/></a>
<p>
<span><a href="">白羊</a></span>
<span>辽宁</span>
<span>22个共同好友</span>
</p>
</div>
<div class="bottom">
<p>未分组的好友</p>
</div>
</li>
<li>
<div class="con">
<a href="" class="a-img"><img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/></a>
<p>
<span><a href="">白羊</a></span>
<span>辽宁</span>
<span>22个共同好友</span>
</p>
</div>
<div class="bottom">
<p>未分组的好友</p>
</div>
</li>
</ul>
</div>
</body>
</html>
