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

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

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

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

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

给按钮设置点击事件,使用三目运算方法切换最外层的样式名称就好

attr()方法的使用:

后面看到同事使用方法:
$('#id').toggleClass("b");
在元素里面设置两个不同的calss  a 和 b;
toggleClass(); 对设置或移除被选元素的一个或多个类进行切换,(元素里面有这个class就删除,没有就添加)
我尝试用这个方法去实现效果,可是,做好的布局却乱成一堆,一开始以为是多个class是后面的class覆盖前面的class,后面才发现只是class里面的属性会覆盖,如果你class a 里面写了margin-top: 20px;然后你在b布局里不需要marign;那你必须在b布局里写上margin-top: 0px;这样才算是把样式给覆盖掉了,因为之前没有想到这一点,所以没有在b布局里把这个marign给设置成0px;