大神指教，为毛我这个按着没有反应，那里出问题了，球指教！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<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>

<ul>

<li>

</a>

<p>

<span>21个共同好友</span>

</p>

</div>

<div class="conn">未分组的好友</div>

</a>

</li>

<li>

</a>

<p>

<span>21个共同好友</span>

</p>

</div>

<div class="conn">未分组的好友</div>

</a>

</li>

<li>

</a>

<p>

<span>21个共同好友</span>

</p>

</div>

<div class="conn">未分组的好友</div>

</a>

</li>

<li>

</a>

<p>

<span>21个共同好友</span>

</p>

</div>

<div class="conn">未分组的好友</div>

</a>

</li>

<li>

</a>

<p>

<span>21个共同好友</span>

</p>

</div>

<div class="conn">未分组的好友</div>

</a>

</li>

<li>

</a>

<p>

<span>21个共同好友</span>

</p>

</div>

<div class="conn">未分组的好友</div>

</a>

</li>

<li>

</a>

<p>

<span>21个共同好友</span>

</p>

</div>

<div class="conn">未分组的好友</div>

</a>

</li>

<li>

</a>

<p>

<span>21个共同好友</span>

</p>

</div>

<div class="conn">未分组的好友</div>

</a>

</li>

<li>

</a>

<p>

<span>21个共同好友</span>

</p>

</div>

<div class="conn">未分组的好友</div>

</a>

</li>

</ul>

</div>

</body>

</html>

qq_闌_0

浏览 1494回答 4