這是上周前端網頁CSS技術的另一個作業,也是CSS關於Image的最後一個範例,這個範例中的作品圖集可以透過分類選項來挑選要顯示的項目,其原理是透過JS,動態的加入一個特定的class來讓區塊顯示出來,而其頁面結構中則是預設一開始全部的區塊都是不顯示的,頁面一載入先執行一個show all的指令來讓全部的區塊都加上’show’這個class,之後再動態的依照使用者的選擇來決定要顯示那些項目。

可供過濾選擇的作品集

預設會先執行show all讓所有的class都加上show

選擇分類項目後只顯示特定的作品內容

執行選擇後,只有特定的區塊classanme 會加上show,其它的區塊則是移除show,變成不顯示
HTML和CSS的內容周三老師應該會再講解,可能會再要求加上媒體查詢的功能,讓不同的螢幕大小可以顯示不同的欄數和各項版面效果,所以這裏只放上Js的部份及我的解讀.
留言