1.目标效果
实现信息列表的平铺布局与列表布局的切换效果。
2.实现思路
1)写出信息列表与切换按钮,切换按钮可使用正方形中间插入span的白条而形成两种不同的按钮。
2)为两种不同布局设置样式,一种是列表形式,另一种为平铺方式,可设定每个li宽度并向左浮动而形成。
3)为没有被选中的按钮添加类,当点击事件发生时,判断若是此类,则切换布局(即将列表部分的类名改变)。
3.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表切换</title>
<style>
.cl{display:inline-block; width:12px; height:12px; background:#34538b; font-size:0;}
.cl.on{background:#a0b3d6;}.cl.on:hover{background:#486aaa;}