实用的列表切换

最新推荐文章于 2018-03-01 16:47:36 发布

原创最新推荐文章于 2018-03-01 16:47:36 发布 · 置顶 · 925 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

web组件效果专栏收录该内容

2 篇文章

订阅专栏

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

语言及要点

应用js的jQuery框架
通过children() 获取ul的子元素
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");
    })
})