CSS 商品的列表布局和网格布局的切换

最近做的一个项目是需要商品不同的形式排列,一开始使用的是a标签直接跳转到另一个页面,后来发现可以用在同一个页面切换class实现,下面看下我是如何实现的

因为两种页面展示的数据都是一样的,看下效果图

 

先写好两个不同的css布局:

我这里使用的是scss,只有最外层的样式名称不一样,里面的样式名称都是一样

给按钮设置点击事件,使用三目运算方法切换最外层的 class 和 图标 就好

attr()方法的使用: