<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>*{ margin:0px; padding:0px; font-family:"微软雅黑"; font-size:14px;}a{text-decoration:none;}ul,li{list-style:none;} #box{ width:900px; height:auto; border:1px solid #006; margin:0 auto; overflow:hidden;}.top{ height:40px; }.top a{ display:block; width:30px; height:30px; float:right; margin:5px;}.btn-list-off{ background:#fff url(images/anniu.png) no-repeat -163px -45px;}.btn-car-on{ background:#fff url(images/anniu.png) no-repeat -104px 0px;}.btn-list-on{ background:#fff url(images/anniu.png) no-repeat -104px -45px;}.btn-car-off{ background:#fff url(images/anniu.png) no-repeat -163px 0px;}#box ul li{ width:278px; float:left; border:1px solid #009; height:auto; list-style:none; margin:10px;}.a-img{ width:278px; height:278px; display:block; overflow:hidden;}p a, p span{ display:block; line-height:25px; padding-left:10px;}.conn{ background-color:#006; color:#FF0; text-align:center; line-height:40px; margin-top:8px;}.small{ width::60px; height:60px; display:block; float:left;margin:5px; }</style><script type="text/javascript"> window.onload = function(){ //获取按钮 var liebanniu=document.getElementById("bat1"); var kapanniu=document.getElementById("bat2"); var imgs=document.getElementsByName("img"); liebanniu.onclick=function(){ //改变按钮的class值 liebanniu.className="btn-list-on"; kapanniu.className="btn-car-off"; //改变每一个图片的路径及他们父节点的class值 for(var i=0;i<imgs.length;i++) { imgs[i].src = "./images/small.jpg"; imgs[i].parentNode.className = "a-img small"; } } kapanniu.onclick=function(){ liebanniu.className="btn-list-off"; kapanniu.className="btn-car-on"; for(var i=0;i<imgs.length;i++) { imgs[i].src = "./images/meinv.jpg"; imgs[i].parentNode.className = "a-img"; } } }</script></head><body><div id="box"> <div class="top"> <a href="#" title="列表模式" id="bat1" class="btn-list-off"></a> <a href="#" title="卡片模式" id="bat2" class="btn-car-on"></a> </div> <ul> <li> <div class="con"> <a href="#" class="a-img "> <img src="images/meinv.jpg" /> </a> <p> <a href="#">白杨</a> <span>辽宁</span> <span>21个共同好友</span> </p> </div> <a href="#"> <div class="conn">未分组的好友</div> </a> </li> <li> <div class="con"> <a href="#" class="a-img "> <img src="images/meinv.jpg" /> </a> <p> <a href="#">白杨</a> <span>辽宁</span> <span>21个共同好友</span> </p> </div> <a href="#"> <div class="conn">未分组的好友</div> </a> </li> <li> <div class="con"> <a href="#" class="a-img "> <img src="images/meinv.jpg" /> </a> <p> <a href="#">白杨</a> <span>辽宁</span> <span>21个共同好友</span> </p> </div> <a href="#"> <div class="conn">未分组的好友</div> </a> </li> <li> <div class="con"> <a href="#" class="a-img "> <img src="images/meinv.jpg" /> </a> <p> <a href="#">白杨</a> <span>辽宁</span> <span>21个共同好友</span> </p> </div> <a href="#"> <div class="conn">未分组的好友</div> </a> </li> <li> <div class="con"> <a href="#" class="a-img "> <img src="images/meinv.jpg" /> </a> <p> <a href="#">白杨</a> <span>辽宁</span> <span>21个共同好友</span> </p> </div> <a href="#"> <div class="conn">未分组的好友</div> </a> </li> <li> <div class="con"> <a href="#" class="a-img "> <img src="images/meinv.jpg" /> </a> <p> <a href="#">白杨</a> <span>辽宁</span> <span>21个共同好友</span> </p> </div> <a href="#"> <div class="conn">未分组的好友</div> </a> </li> <li> <div class="con"> <a href="#" class="a-img "> <img src="images/meinv.jpg" /> </a> <p> <a href="#">白杨</a> <span>辽宁</span> <span>21个共同好友</span> </p> </div> <a href="#"> <div class="conn">未分组的好友</div> </a> </li> <li> <div class="con"> <a href="#" class="a-img "> <img src="images/meinv.jpg" /> </a> <p> <a href="#">白杨</a> <span>辽宁</span> <span>21个共同好友</span> </p> </div> <a href="#"> <div class="conn">未分组的好友</div> </a> </li> <li> <div class="con"> <a href="#" class="a-img "> <img src="images/meinv.jpg" /> </a> <p> <a href="#">白杨</a> <span>辽宁</span> <span>21个共同好友</span> </p> </div> <a href="#"> <div class="conn">未分组的好友</div> </a> </li> </ul> </div></div></body></html>
4 回答
fighting_dundun
TA贡献4条经验 获得超1个赞
var imgs = document.getElementsByTagName("img");
//获取img 标签 用TagName添加回答
举报
0/150
提交
取消