web 列表切换

最新推荐文章于 2024-09-12 21:44:12 发布

goulei2010

最新推荐文章于 2024-09-12 21:44:12 发布

阅读量823

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript css 文章标签： css javascript

本文链接：https://blog.youkuaiyun.com/goulei2010/article/details/53997496

JavaScript 同时被 2 个专栏收录

30 篇文章

订阅专栏

css

12 篇文章

订阅专栏

本文介绍了如何利用JavaScript动态更改class以及CSS样式，来实现Web页面中列表的切换效果。通过示例HTML代码和简单的操作，展示了这种效果的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理：通过js更改class从而实现切换效果。

html：

<body>
    <div id="box">
        <div class="top">
            <a href="#" title="列表模式" id="btn1" class="btn-list-off"/>
            <a href="#" title="卡片模式" id="btn2" class="btn-card-on"/>
        </div>
        <ul>
            <li>
                <div class="con">
                    <a href="#" class="a-img">
                        <img src="images/big.jpg" />
                    </a>
                    <p>
                        <a href="#">白杨</a>
                        <span>辽宁</span>
                        <span>21个共同朋友</span>
                    </p>
                    <div class="bottom">
                        未分组的好友
                    </div>
                </div>
            </li>
            <li>
                <div class="con">
                    <a href="#" class="a-img">
                        <img src="images/big.jpg" />
                    </a>
                    <p>
                        <a href="#">白杨</a>
                        <span>辽宁</span>
                        <span>21个共同朋友</span>
                    </p>
                    <div class="bottom">
                        未分组的好友
                    </div>
                </div>
            </li>
            <li>
                <div class="con">
                    <a href="#" class="a-img">
                        <img src="images/big.jpg" />
                    </a>
                    <p>
                        <a href="#">白杨</a>
                        <span>辽宁</span>
                        <span>21个共同朋友</span>
                    </p>
                    <div class="bottom">
                        未分组的好友
                    </div>
                </div>
            </li>
            <li>
                <div class="con">
                    <a href="#" class="a-img">
                        <img src="images/big.jpg" />
                    </a>
                    <p>
                        <a href="#">白杨</a>
                        <span>辽宁</span>
                        <span>21个共同朋友</span>
                    </p>
                    <div class="bottom">
                        未分组的好友
                    </div>
                </div>
            </li>
            <li>
                <div class="con">
                    <a href="#" class="a-img">
                        <img src="images/big.jpg" />
                    </a>
                    <p>
                        <a href="#">白杨</a>
                        <span>辽宁</span>
                        <span>21个共同朋友</span>
                    </p>
                    <div class="bottom">
                        未分组的好友
                    </div>
                </div>
            </li>
            <li>
                <div class="con">
                    <a href="#" class="a-img">
                        <img src="images/big.jpg" />
                    </a>
                    <p>
                        <a href="#">白杨</a>
                        <span>辽宁</span>
                        <span>21个共同朋友</span>
                    </p>
                    <div class="bottom">
                        未分组的好友
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>

css：

*{
    margin: 0;
    padding: 0px;
    list-style: none;
}

a{
    text-decoration: none;
}

#box{
    overflow:hidden;
    width: 550px;
    margin: 0 auto;
    box-shadow: 0 0 5px #aaa;
    border: 1px solid #eee;
}

p a,p span{
    display:block;
    line-height:23px;
    padding-left:10px;
}

#box ul li{
    width: 164px;
    border: 1px solid #aaa;
    box-shadow:0 0 5px #aaa;
    margin: 7px;
}

.a-img{
    width: 164px;
    display: block;
    overflow: hidden;
}

.top{
    height: 40px;
}

.top a{
    height: 16px;
    width: 16px;
    display: block;
    float: right;
    margin: 5px;
}

#box li{
    float:left;
}

.bottom{
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #ccc;
}

.small{
    height: 50px;
    width: 50px;
    float: left;
    margin: 5px;
}

.btn-list-off{background:#fff url(../images/btns.jpg) no-repeat -38px 0px;}
.btn-card-on{background:#fff url(../images/btns.jpg) no-repeat -21px -34px;}
.btn-list-on{background:#fff url(../images/btns.jpg) no-repeat -21px 0px;}
.btn-card-off{background:#fff url(../images/btns.jpg) no-repeat -38px -32px;}

JavaScript：

window.onload=function () {
    var box=document.getElementById("box");
    var btnList = document.getElementById("btn1");
    var btnCard = document.getElementById("btn2");
    var imgs=box.getElementsByTagName("img");

    btnList.onclick=function () {
        btnList.className="btn-list-on";
        btnCard.className="btn-card-off";

        for(var i=0;i<imgs.length;i++){
            imgs[i].src="images/small.jpg";
            imgs[i].parentNode.className="a-img small";
        }
    }

    btnCard.onclick=function () {
        btnList.className="btn-list-off";
        btnCard.className="btn-card-on";

        for(var i=0;i<imgs.length;i++){
            imgs[i].src="images/big.jpg";
            imgs[i].parentNode.className="a-img";
        }
    }
}

下载：

点击打开链接