# 🏅 Day 24 - jQuery toggleClass ### 題目 請使用 jQuery 的 `toggleClass` 語法嘗試在點擊 `.list-item` 時加上 `.active`,再次點擊時會取消 `.active` 樣式 (需透過 Codepen 繳交) 請在 Pen Settings 設定 CSS Reset,如圖: ![](https://i.imgur.com/tUVAM6v.png) --- ### HTML ```htmlembeded= <div class="list"> <h1 class="list-title">甜點類別</h1> <ul> <li class="list-item active"><a class="list-link" href="#">所有甜點(48)</a></li> </ul> </div> ``` ### CSS ```css a { text-decoration: none; } .list { width: 300px; text-align: center; } .list-title { font-size: 24px; background: #3F5D45; color: #EAF0ED; padding: 16px 0; } .list-item { border: 1px solid #EAF0ED; } .list-item.active { background: #EAF0ED; } .list-link { font-size: 24px; line-height: 40px; font-weight: bold; color: #3F5D45; display: block; padding: 16px 0; } ``` ### JS ```javascript= $('.list-item').click(function (e) { e.preventDefault(); // 請使用 toggleClass 完成此作業 }) ``` ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖(需打開程式碼的部分觀看) ![](https://i.imgur.com/vftL5i0.png) <!-- 解答: https://codepen.io/hexschool/pen/MWVeMbZ --> 回報區 --- |#|Discord|CodePen / 答案| |:----:|:----:|:----:| | 1 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/RwzGgmm)| | 2 | abab016001 |[Codepen](https://codepen.io/abab016001Jin/pen/XWLjaJZ)| | 3 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/vYqXJKo) | | 4 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/gONwxLp)| | 5 | fendy1223 | [Codepen](https://codepen.io/fendy1223/pen/eYwdELL) | | 6 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/abgmyQx) | | 7 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/WNqGEyE?editors=1111) | | 8 | yoishere | [Codepen](https://codepen.io/yoishere/pen/ZEdpXYV) | | 9 | Theodore | [Codepen](https://codepen.io/GustavoFringgg/pen/BagLwNw) | | 10 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/abgoOme) | | 11 | KUN. | [Codepen](https://codepen.io/barry91205/pen/ExBgwmx) | | 12 | Mike | [Codepen](https://codepen.io/mike2049/pen/wvLzrgm) | | 13 | Jim | [Codepen](https://codepen.io/JimChou/pen/LYKRzOR) | | 14 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/BagLwOP)| | 15 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/vYqXJPG) | | 16 | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/LYKRzwL)| | 17 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/jOjMaWN)| | 18 |Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/QWXKOXE)| | 19 | MY | [Codepen](https://codepen.io/ahmomoz/pen/GRbjyOp) | | 20 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/ZEdprQw) | | 21 | hao jing | [Codepen](https://codepen.io/hjxu/pen/ZEdpxXp) | | 22 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/LYKRmGM) | | 23 | Noelle | [Codepen](https://codepen.io/NoelleKH/pen/vYqXrVe) | | 24 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/YzoGjQv?editors=1111) | | 25 | kawa | [Codepen](https://codepen.io/z83xji6/pen/XWLjgxe) | | 26 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/BagLezw) | | 27 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/poXNzGB) | | 28 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/xxoRbVz) | | 29 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/VwJKWvQ) | | 30 | 黛Dye | [Codepen](https://codepen.io/Dye_Note/pen/BagQWjy) | | 31 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/poXNeWw) | | 32 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/JjQbrMo) | | 33 | jerry_66983 | [Codepen](https://codepen.io/Barry-C/pen/qBzqpjJ) | | 34 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/BagQxdo) | | 35 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/rNEWdQj) | | 36 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/ZEdBMzL) | | 37 | wind | [Codepen](https://codepen.io/wind7y/pen/JjQbeyW) | | 38 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/qBzqLZK)| | 39 | 610 | [Codepen](https://codepen.io/YI-LING-LIU/pen/mdZOvaw) | | 40 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/oNrYRpj) | | 41 | n913239 | [Codepen](https://codepen.io/n913239/pen/JjQEPWg) | | 42 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/VwJPZPL) | | 43 | EdHuang | [Codepen](https://codepen.io/yide1986/pen/RwzKGpd) | | 44 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/rNEjmob) | | 45 | jasonlin | [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/QWXpLGg) | | 46 | GAVI | [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/vYqgjyQ) | | 47 | 俊 | [Codepen](https://codepen.io/jun12079/pen/YzoZpoq) | | 48 | chris | [Codepen](https://codepen.io/chrischen666/pen/abgWZdg) | | 49 | Chieh | [Codepen](https://codepen.io/Chieh_/pen/ZEdKpEE) | | 50 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/xxodmmL) | | 51 | Arvin | [Codepen](https://codepen.io/arvinyang1925/pen/rNEmXBB) | | 52 | glen_69515 | [Codepen](https://codepen.io/glenyaochih/pen/gONRbXj)| | 53| xcx100 | [Codepen](https://codepen.io/c13026/pen/XWLgELL) | | 54 | Toung | [Codepen](https://codepen.io/Toung/pen/NWZvWjj) | 55 | Emma | [Codepen](https://codepen.io/Emma0919/pen/MWMEorO) | | 56 | emmayo | [Codepen](https://codepen.io/emmayo/pen/dyBVdwe) | | 57 | Asu | [Codepen](https://codepen.io/wuasu/pen/BagmqQx) | | 58 | Enn | [Codepen](https://codepen.io/enntang/pen/WNqdNPx) | | 59 | OSN |[Codepen](https://codepen.io/osncodepen/pen/abgjWqG)| <!-- | No | Discord | [Codepen]() | -->
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up