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

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


qq_闌_0
浏览 1494回答 4
4回答

qq_渐变乀_0

同学,还是把代码放到代码语言格式里面吧,这样的代码谁会帮你看呀

qq_阳光宅男_4

为什么不用css  太混乱了 这样 不好看

fighting_dundun

var imgs = document.getElementsByTagName("img"); //获取img 标签  用TagName
打开App,查看更多内容
随时随地看视频慕课网APP