实用的列表切换

这里写图片描述
列表切换可以给用户更好的用户体验,解决因内容区域太多而导致的浏览麻烦,列表切换可以节省文章的篇幅,用户可以凭自己的喜好去选择哪一种浏览方式

语言及要点

  1. 应用js的jQuery框架
  2. 通过children() 获取ul的子元素
  3. removeClass() , addClass()

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MakStudio列表切换</title>
    <link rel="stylesheet" href="style.css">
    <script src="jquery-2.1.1.min.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <div class="box">
        <div class="list-box">
            <ul>
                <li class="list-1" style="background-position:0px 0px"></li>
                <li class="list-2" style="background-position:-32px -32px"></li>
            </ul>
        </div>
    </div>

    <div>
        <ul class="content-box">
            <li class="content-1">
                <div class="content-detail">
                    <img src="logo.png" style="width:240px">
                    <span>文字列表</span>
                </div>
            </li>
            <li class="content-1">
                <div class="content-detail">
                    <img src="logo.png" style="width:240px">
                    <span>文字列表</span>
                </div>
            </li>
            <li class="content-1">
                <div class="content-detail">
                    <img src="logo.png" style="width:240px">
                    <span>文字列表</span>
                </div>
            </li>

        </ul>
    </div>

</body>
</html>

CSS代码

*{
    margin: 0;
    padding: 0;
}
li{
    list-style-type: none;
}
.box{
    width:800px;
    margin: 30px auto 0 auto;
}
.list-box{
    width: 800px;
    height:35px;
    border-bottom:1px solid #eee;
}
.list-box ul{
    float: right;   
}
.list-box ul li{
    width: 32px;
    height:32px;
    list-style-type: none;
    background-image: url(btn.png);
    float: left;
    background-repeat: no-repeat;
    cursor: pointer;
}
.content-box{
    width:800px;
    margin:20px auto;
}
.content-2{
    width: 240px;
    height:240px;
    border:1px solid #333;
    float: left;
    margin-left:20px;
    list-style-type: none;
    margin-bottom: 20px;
}
.content-1{
    height:203px;
    margin-bottom:20px;
}

JS代码

$(document).ready(function(){
    $(".list-1").bind("click",function(){
        $(".list-1").css("background-position","0px 0px");
        $(".list-2").css("background-position","-32px -32px");
        $(".content-box").children().removeClass("content-2").addClass("content-1");
    })
    $(".list-2").bind("click",function(){
        $(".list-1").css("background-position","0px -32px");
        $(".list-2").css("background-position","-32px 0px");
        $(".content-box").children().removeClass("content-1").addClass("content-2");
    })
})

Github链接

https://github.com/Beckyisme/changeList.git

查看更多内容,请关注微信公众平台MakStudio
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值