web 列表切换

最新推荐文章于 2022-11-17 17:15:38 发布

goulei2010

最新推荐文章于 2022-11-17 17:15:38 发布

阅读量780

点赞数

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

本文链接：https://blog.csdn.net/goulei2010/article/details/53997496

版权

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

摘要由CSDN通过智能技术生成

原理：通过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>