心塞啊，為毛我寫完沒效果，什么反應(yīng)都沒有
<!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";
//改變圖片路徑以及父節(jié)點的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>
2016-01-23
你沒說明是什么效果，我就看了下js。如果是動態(tài)效果沒有的話，應(yīng)該是js代碼中是getElemetsByTagName，而不是getElemetsTagName
2016-01-12
var imgs = document.getElemetsTagName("img");?? 后面的變量名錯了，應(yīng)該都是imgs，不是length(),img[]
2016-01-12
var imgs = document.getElemetsTagName("img");?? 后面的變量名錯了，應(yīng)該都是imgs，不是length(),img[]