切換不了效果。真的找不到問(wèn)題在哪兒？？求教啊。
<!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>無(wú)標(biāo)題文檔</title>
<style type="text/css">
?? ?
/* 制作靜態(tài)網(wǎng)頁(yè)的樣式*/
?*{margin:0px;padding:0px;}
?body{font-size:14px;font-family:"微軟雅黑";}
?a{text-decoration:none;}
?ul li{list-style:none;}
?
?#box{border:1px solid #aaa;height:auto;margin:0 auto;
?overflow:hidden;width:550px;
?}
?#box ul li{
???? height:auto;width:164px;border:1px solid #aaa;float:left;margin:7px;
??? ?
?}
?.bottom{
???? background-color:#aaa;??? ?
???? height:40px;
???? line-height:40px;
???? text-align:center;
?}
?.top{height:40px;}
?.top a{height:16px;width:16px;display:block;float:right;margin:5px;}
?.btn-list-off{background:url("http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg") no-repeat -38px 0px;}
?.btn-car-on{
???? background:url(" http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg") no-repeat -21px -34px;}
????? .btn-list-on{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -21px 0px;}
?? ?.btn-car-off{background:#fff url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg) no-repeat -38px -32px;}
?? ?
??? .a-img{height:164px;width:164px;display:block;overflow:hidden;}
?? ?p a,p span{
?? ??? ?display:block;
?? ??? ?line-height:23px;
?? ??? ?padding-left:10px;
?? ?}
??? .small{height:50px;width:50px;float:left;margin:5px;}
</style>
<script type="text/javascript">
// 使用JS實(shí)現(xiàn)，點(diǎn)擊不同的按鈕(卡片模式和列表模式)顯示不同的模式。
window.onload=function(){
?? ?
??? //獲取列表按鈕的卡片按鈕
??? var listBtn=document.getElementById("btn1");
??? var carBtn=document.getElementById("btn2");?? ?
??? //獲取多個(gè)圖片
??? var imgs=document.getElementsByTagName("img");
?? ?
??? //列表模式
??? listBtn.onclick=function(){
??????? //改變按鈕的class
??????? listBtn.className="btn-list-on";
??????? carBtn.className="btn-car-off";?? ?
??????? //改變圖片路勁和父節(jié)點(diǎn)圖片
??? 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(){
??????? //改變按鈕的class
??????? listBtn.className="btn-list-off";
??????? carBtn.className="btn-car-on";?? ?
??????? //改變圖片路勁和父節(jié)點(diǎn)圖片
??? for(var i=0;i<imgs.length;i++){
??????? imgs[i].src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg";
??????? imgs[i].parentNode.className="a-img";
?????? ?
??? }
??? }
}
</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="#">白陽(yáng)</a>
?? ??? ??? ??? ?<span>遼寧</span>
?? ??? ??? ??? ?<span>21個(gè)共同好友</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="#">白陽(yáng)</a>
?? ??? ??? ??? ?<span>遼寧</span>
?? ??? ??? ??? ?<span>21個(gè)共同好友</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="#">白陽(yáng)</a>
?? ??? ??? ??? ?<span>遼寧</span>
?? ??? ??? ??? ?<span>21個(gè)共同好友</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="#">白陽(yáng)</a>
?? ??? ??? ??? ?<span>遼寧</span>
?? ??? ??? ??? ?<span>21個(gè)共同好友</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="#">白陽(yáng)</a>
?? ??? ??? ??? ?<span>遼寧</span>
?? ??? ??? ??? ?<span>21個(gè)共同好友</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="#">白陽(yáng)</a>
?? ??? ??? ??? ?<span>遼寧</span>
?? ??? ??? ??? ?<span>21個(gè)共同好友</span>
?? ??? ??? ? </p>
?? ??? ??? ? </div>
?? ??? ??? ? <div class="bottom">
?? ??? ??? ? ?? ?未分組的好友
?? ??? ??? ? </div>
?? ??? ?</li>
?? ?</ul>
</div>
</body>
</html>
2015-03-27
哦哦，非常感謝！！以后要細(xì)心了。
2015-03-27
//列表模式 ????listBtn.onclick=function(){ ?//卡片模式 ????listBtn.onclick=function(){這里你寫成一樣了