---
# System prepended metadata

title: "\U0001F3C5 Day 25"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 25

## jQuery toggleClass

### 題目

請使用 jQuery 的 `toggleClass` 語法嘗試在點擊 `.list-item` 時加上 `.active`，再次點擊時會取消 `.active` 樣式 （需透過 Codepen 繳交）

請在 Pen Settings 設定 CSS Reset，如圖：

![](https://i.imgur.com/tUVAM6v.png)

---


### HTML
```htmlmixed=
<ul class="list">
  <li class="list-item list-title">甜點類別</li>
  <li class="list-item active"><a class="list-link" href="#">所有甜點（48）</a></li>
</ul>
```

### 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 / 答案                          |
|:--------------:|:---------------------------------------------------------------:|
|    Anna Liu#3794    |        [Codepen](https://codepen.io/anna618/pen/YzaYMqr)        |
|    Chi#7605    |        [Codepen](https://codepen.io/YoChi84/pen/xxWPXRQ)        |
| Daisy_Li#4231  |  [CodePen](https://codepen.io/lidairong-gmail-com/pen/JjLOrWx)  |
|   Clara#1275   |       [Codepen](https://codepen.io/bsupixqu/pen/bGvYogB)        |
|   𝓛𝓊𝒸𝓎#8635    |       [Codepen](https://codepen.io/lucygirl/pen/OJvOxpN)        |
|  CloThEs#7837  |       [Codepen](https://codepen.io/CloThEsZ/pen/dymzMjO)        |
|  布魯諾#7239   |       [Codepen](https://codepen.io/bruno-yu/pen/bGvYoBB)        |
|  黃士桓#7654   |    [codePen](https://codepen.io/shr-huan-huang/pen/MWVOjLo)     |
|   洋蔥#5295    |  [codePen](https://codepen.io/HSUNA/pen/xxWPXPM?editors=1010)   |
|  Amberhh#2465  |        [codePen](https://codepen.io/Amberhh/pen/KKoyXoZ)        |
|   大衛#4869    | [codePen](https://codepen.io/exnsrpjc/pen/dymZVZx?editors=1010) |
|   L0F0#8733    |         [codePen](https://codepen.io/l0f0/pen/VwXrMXw)          |
| christina#6185 |      [Codepen](https://codepen.io/chrisc0210/pen/oNqoGqK)       |
|   JackC#0411   |        [codePen](https://codepen.io/key0329/pen/BarmwMZ)        |
|   威爾#1694    |        [CodePen](https://codepen.io/WILL_Wu/pen/eYMeGbQ)        |
|   小白#2406    |      [CodePen](https://codepen.io/gracewhite/pen/QWmOqmq)       |
|   Joyce#3790   |      [CodePen](https://codepen.io/joycehuang/pen/KKoyyMG)       |
|   yuyu#6310    |       [CodePen](https://codepen.io/yuyu0905/pen/LYdOOyZ)        |
|Karol-Kuo#5287|       [CodePen](https://codepen.io/ting-yu-kuo/pen/qBoVVXZ)        |
|   bonnieli1414#4906    |       [CodePen](https://codepen.io/bonnieli1414/pen/ExEbbma)        |
| LHchien33#6232 | [CodePen](https://codepen.io/lin_chien/pen/GRxOONv) |
| Arista#5802 | [CodePen](https://codepen.io/arista-hsieh/pen/RwMjjLZ) |
| azami#5986 |[CodePen](https://codepen.io/azami/pen/JjLOOGo)|
| 小諾#1866 |[CodePen](https://codepen.io/noichan/pen/qBoVVoa)|
| 黑白兔#0684 |[CodePen](https://codepen.io/johnny329/pen/poLddLB)|
| Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/GRxOyRB) |
|int#7518|[Codepen](https://codepen.io/intHuang/pen/qBoVpOX?editors=0010)|
|zera#6060|[Codepen](https://codepen.io/zera-tseng/pen/PoROEbV)|
|Ke#1391|[Codepen](https://codepen.io/federerke/pen/BarmJde)|
|leeli#6423|[Codepen](https://codepen.io/leelilee/pen/LYdOedm)|
| JarDar#6980 |[codepen](https://codepen.io/jardarpen/pen/PoROEyM)|
| peter#0 |[codepen](https://codepen.io/JIAN-RONG/pen/ExEboNm?editors=1011)|
| YI#0863 |[codepen](https://codepen.io/YI0305/pen/bGvYLLq)|
| Rita916#4384 |[codepen](https://codepen.io/rita0916/pen/vYRWRbW)|
| 雷雷#7844 |[codepen](https://codepen.io/lei-yi-jie/pen/MWVOVMY)|
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/yLKPKWB?editors=1010)
|Hsiu#8767|[codepen](https://codepen.io/amy-hsiu/pen/wvmPmQY)
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/VwXrxZr) |
|hungya#0773|[codepen](https://codepen.io/hungya777/pen/abYVYMm) |
|WEI_RIO#9342|[codePen](https://codepen.io/wei_wu/pen/rNdYKJr)|
|Benson#6763|[codePen](https://codepen.io/kumashow/pen/PoROeQg)|
| Yunei#6323 |[codePen](https://codepen.io/Yunei/pen/wvmPXxJ)|
|RayChen#6088|[codePen](https://codepen.io/raychen1996/pen/OJvOwmz)|
|Barret#1119|[CodePen](https://codepen.io/barret0720/pen/MWVOBER)|
| 我是泇吟 #5189 | [CodePen](https://codepen.io/kljuqbxs/pen/oNqoMdB) |
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/rNdzYEm)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/JjLOmyx)|
|LinaChen#1796|[Codepen](https://codepen.io/LinaChen/pen/XWEzVxe)|
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/wvmPQYE)|
 |yu魚#1330   |  [CodePen](https://codepen.io/Yu_yu/pen/LYdOMEL)| 
 |Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/VwXrqzx)
  |WEI#0797|[codepen](https://codepen.io/wei-z/pen/mdxqQMw)
| 咻蹦#1526 | [CodePen](https://codepen.io/emmasyu/pen/bGvYZWv) |
| Vera#5592 | [CodePen](https://codepen.io/skvera/pen/YzaEomE) |
| Carrie #2750 | [CodePen](https://codepen.io/carrie-wang/pen/KKoyORd) |
|IreneY #0086| [codepen](https://codepen.io/HalfPlannedJourney/pen/ExEbqoX)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/GRxyKXo)|
|   YU #0618   |       [Codepen](https://codepen.io/yoken_/pen/jOzYNgZ)        |
| mei#8421 | [Codepen](https://codepen.io/Shila-Chen/pen/JjLMoKN) |
| 鉦勝 #8333 | [Codepen](https://codepen.io/atckmax823/pen/NWYXqyd) |
| 楓之聲#6945 | [codepen](https://codepen.io/sshane258/pen/GRxyWJd)|
| Clara Cai#7097 | [codepen](https://codepen.io/Clara-Snowy/pen/KKoZNYZ)|
| NeilLin#3009 | [codepen](https://codepen.io/a0071421/pen/KKoZqqx)|
| PeggyLiao#1552 |[CodePen](https://codepen.io/PeiJu-Liao/pen/NWYXdGw)|
| yo_yo#2678 |[CodePen](https://codepen.io/djmliogn-the-flexboxer/pen/qBopyea)|
| Erichooojop#8199 |[CodePen](https://codepen.io/lumedkle/pen/zYWpmGE)|
| Yuna Huang#2692 |[CodePen](https://codepen.io/Yuna1002/pen/mdxpYmZ)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/NWYXQYV)|
|ajhappy#6488|[Codepen](https://codepen.io/ajhappy5438/pen/dymdYjM)|
|阿翰 #1984|[Codepen](https://codepen.io/JohnHan05/pen/QWmQNEy)|
|Fang #4680|[Codepen](https://codepen.io/std95174/pen/poLaedM)|
|choubree#4350|[Codepen](https://codepen.io/BreeChou/pen/LYdQRZx)|
|Melon#0380|[Codepen](https://codepen.io/BalaFang/pen/QWmQgqQ)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/mdxXMRp)|
|Henry#7386|[Codepen](https://codepen.io/h1nr9/pen/oNqERYd)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/oNqqbeB)|
|Van.CS #2067|[Codepen](https://codepen.io/fbacojji-the-selector/pen/LYddjWZ)|
|aki|[codepen](https://codepen.io/aki168/pen/zYWWgqQ)|
|kevin8349#6131|[codepen](https://codepen.io/kun8349/pen/mdxLXpG)|
|艾芮絲#6060|[codepen](https://codepen.io/wangyingju/pen/oNqdPwj)|
|hua#9099|[Codepen](https://codepen.io/LHua/pen/vYRjMvx)|
|QOO#8446|[Codepen](https://codepen.io/QOOQOOQ/pen/NWYymRL)|
|艾草#4830|[Codepen](https://codepen.io/jmkhsutp/pen/gOeKgvY)|
|紙飛機 #1335|[Codepen](https://codepen.io/paperplanea/pen/bGvKWOy?editors=1111)|
|Nini Chen#5790|[Codepen](https://codepen.io/ninistyle/pen/abYjOEN)|
|Jamie Wu#9345|[Codepen](https://codepen.io/Wu220103/pen/MWVBweR)|
|J_u_d_y#5993|[Codepen](https://codepen.io/J_u_d_y/pen/ExEpKjY)|
|Pony#6778|[Codepen](https://codepen.io/Pony0303/pen/eYMjyGK)|
|肉魚#2149|[Codepen](https://codepen.io/zoechen13/pen/abYjYyy)|
|piha#9987|[CodePen](https://codepen.io/pihahaha/pen/PoRBBmV)|
|狸貓#5863|[CodePen](https://codepen.io/tanuki320/pen/jOzvYQL)|
|yuchenye#6119|[CodePen](https://codepen.io/yuchen/pen/ZExqeOe)|
|阿蘇#8531|[CodePen](https://codepen.io/susu3131/pen/JjLmypB)|
|Shuo#1596|[CodePen](https://codepen.io/chiangchungshuo/pen/gOeBZGN)|
|kancheng#3915|[CodePen](https://codepen.io/kancheng/pen/RwMqEJE)|
|Manson許#2295|[CodePen](https://codepen.io/oupbzfxq-the-scripter/pen/KKobXNa)|
|Rena#6249|[CodePen](https://codepen.io/aureate0116/pen/MWVZrYg)|
|Deborah#0033|[CodePen](https://codepen.io/deborah-tsai/pen/JjLwZxz)|
|NathanJames#8120|[CodePen](https://codepen.io/ufo060204/pen/QWmzVWY)|
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/LYdMgmq)|
|曼曼#8356|[codepen](https://codepen.io/Vanyacheer/pen/dymrNNB)|
|toshow#5609|[CodePen](https://codepen.io/toshow/pen/qBoweGN)|
|RuoAn#7124|[CodePen](https://codepen.io/LiauRuoAn/pen/XWEQaxW)|