求大神幫忙看看哪出錯了按鈕小圖標出不來
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style type="text/css">
? ??
/* 制作靜態網頁的樣式*/
*{margin:0px; padding:0px;}
body{font:"微軟雅黑";font-size:10px;}
a{text-decoration:none;}
ul,li{list-style:none;}
#box{ width:550px; height:auto;border:1px solid #aaa; overflow:hidden;margin:0 auto;}
.top{height:40px; }
.top a{width:16px; height:16px; display:block; float:right; margin:5px;}
#box ul li{width:164px; height:auto; border:1px solid #fff; float:left;margin:7px;}
p a,span{display:block; line-height:23px;padding-left:10px;}
.btn-list-off{background:#fff; url(http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg) no-repeat -38px 0px;}
.btn-car-on{background:#fff; url(http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg) no-repeat -20px -34px}
.btn-list-on{background:#fff; url(http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg") no-repeat -21px 0px}
.btn-car-off{background:#fff; url( http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg") no-repeat -38px -32px}
.a-img {width:164px; height:164px; overflow:hidden;display:block;}
.small{width:50px; height:50px; float:left;margin:5px;}
.bottom{height:40px; background:#ccc;line-height:40px;text-align:center;}
</style>
<script type="text/javascript">
// 使用JS實現，點擊不同的按鈕(卡片模式和列表模式)顯示不同的模式。
? ?window.onload=function(){
? ? ? ?var listbtn=document.getElementById("btn1");
? ? ? ?var cardbtn=document.getElementById("btn2");
? ? ? ?var imgs=document.getElementsByTagName("img");
? ? ? ? ?
? ? ? ? ?listbtn.onclick(){
? ? ? ? ? ? ?listbtn.className="btn-list-on";
? ? ? ? ? ? ?cardbtn.className="btn-car-off";
? ? ? ? ? ? ?for(var i=0;i<imgs.length;i++){
? ? ? ? ? ? ? ? ?imgs[i].src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg";
? ? ? ? ? ? ? ? ?imgs[i].parentNode.className="a-img";
? ? ? ? ? ? ?}
? ? ? ? ?}
? ? ? ? ?cardbtn.onclick(){
? ? ? ? ? ? ?listbtn.className="btn-list-off";
? ? ? ? ? ? ?cardbtn.className="btn-car-on";
? ? ? ? ? ? ?for(var i=0;i<imgs.length;i++){
? ? ? ? ? ? ? ? ?imgs[i].src="http://img1.sycdn.imooc.com//53ab7cf4000196c000500050.jpg";
? ? ? ? ? ? ? ? ?imgs[i].parentNode.className="a-img small";
? ? ? ? ? ? ?}
? ?}
}
</script>
</head>
<body>
<div id="box">
<div class="top">
<a href="#" title="列表模式" id="btn1" class="btn-list-off"></a>
<a href="#" title="卡片模式" id="btn2" class="btn-car-on"></a>
</div>
<ul>
<li>
<div class="con">
<a href="#" class="a-img ">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg" />
</a>
<p>
<a href="#">angle</a>
<span>遼寧</span>
<span>21個共同好友</span>
</p>?
</div>
<div class="bottom">
未分組的好友
</div>
</li>
?
<li>
<div class="con">
<a href="#" class="a-img">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
</a>
<p>
<a href="#">angle</a>
<span>遼寧</span>
<span>21個共同好友</span>
</p>?
</div>
<div class="bottom">
未分組的好友
</div>
</li><li>
<div class="con">
<a href="#" class="a-img">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
</a>
<p>
<a href="#">angle</a>
<span>遼寧</span>
<span>21個共同好友</span>
</p>?
</div>
<div class="bottom">
未分組的好友
</div>
</li>
<li>
<div class="con">
<a href="#" class="a-img">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
</a>
<p>
<a href="#">angle</a>
<span>遼寧</span>
<span>21個共同好友</span>
</p>?
</div>
<div class="bottom">
未分組的好友
</div>
</li><li>
<div class="con">
<a href="#" class="a-img">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
</a>
<p>
<a href="#">angle</a>
<span>遼寧</span>
<span>21個共同好友</span>
</p>?
</div>
<div class="bottom">
未分組的好友
</div>
</li><li>
<div class="con">
<a href="#" class="a-img">
<img src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/>
</a>
<p>
<a href="#">angle</a>
<span>遼寧</span>
<span>21個共同好友</span>
</p>?
</div>
<div class="bottom">
未分組的好友
</div>
</li>
</ul>
</div>
</body>
</html>
2017-08-22
?????listbtn.onclick(){ ?????????????listbtn.className="btn-list-on"; ?????????????cardbtn.className="btn-car-off"; ?????????????for(var?i=0;i<imgs.length;i++){ ?????????????????imgs[i].src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"; ?????????????????imgs[i].parentNode.className="a-img"; ?????????????} ?????????} ?????????cardbtn.onclick(){ ?????????????listbtn.className="btn-list-off"; ?????????????cardbtn.className="btn-car-on"; ?????????????for(var?i=0;i<imgs.length;i++){ ?????????????????imgs[i].src="http://img1.sycdn.imooc.com//53ab7cf4000196c000500050.jpg"; ?????????????????imgs[i].parentNode.className="a-img?small"; ?????????????}?????listbtn.onclick=function(){ ?????????????listbtn.className="btn-list-on"; ?????????????cardbtn.className="btn-car-off"; ?????????????for(var?i=0;i<imgs.length;i++){ ?????????????????imgs[i].src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"; ?????????????????imgs[i].parentNode.className="a-img"; ?????????????} ?????????} ?????????cardbtn.onclick=function(){ ?????????????listbtn.className="btn-list-off"; ?????????????cardbtn.className="btn-car-on"; ?????????????for(var?i=0;i<imgs.length;i++){ ?????????????????imgs[i].src="http://img1.sycdn.imooc.com//53ab7cf4000196c000500050.jpg"; ?????????????????imgs[i].parentNode.className="a-img?small"; ?????????????}以上地方感覺 ?你寫的不錯，另外圖片不顯示應該是 ?你引用地址不對導致的