CSS 商品的列表佈局和網格佈局的切換
阿新 • • 發佈：2019-02-12
最近做的一個專案是需要商品不同的形式排列,一開始使用的是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;