---
tags: 網頁切版直播班 - 2021 夏季班
---
# 7/22(四) 每日任務

## 題目

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

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


---

### HTML

<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

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

$('.list-item').click(function (e) {
 e.preventDefault();
 // 請使用 toggleClass 完成此作業
})

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答：[Codepen 解答](https://codepen.io/AliceChiang/pen/ZEQPvbj) -->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/RwpMQKe
-->

<!-- 1. 焦糖
Codepen：https://codepen.io/yen-kg/pen/QWpZBjz
-->

<!-- 2.孫 sunne
https://codepen.io/Sunne/pen/poeXgRa -->

<!--3.Alpha
Codepen:https://codepen.io/alphatero/pen/OJmxpyp
-->
<!--4.Jasmin
Codepen:https://codepen.io/thejasmin/pen/wvdqYJO?editors=1111
-->

<!-- 5.Fleur
Codepen：https://codepen.io/swwlee/pen/OJmjqLL
-->
<!--6.陳sam
Codepen:https://codepen.io/euldpliv/pen/MWmEpyq
-->
<!--7. Tina Yen
codepen: https://codepen.io/tlorfrnl-the-typescripter/pen/qBmPrOe
-->
<!--8. LiShang
codepen:https://codepen.io/li-shang/pen/KKmXWgR
-->

<!-- 9.Vic
codepen:https://codepen.io/hsuan333/pen/jOmGBVz
-->

<!-- 10. Lina Chen
codepen:https://codepen.io/LinaChen/pen/NWjapbw
-->

<!-- 11. 雷古娜
codepen:https://codepen.io/tinahopo/pen/vYmexgK -->

<!-- 12. kane0927
codepen:https://codepen.io/kane-lin/pen/XWReMEL
-->

<!-- 13.Sam li
codepen:https://codepen.io/sam830623/pen/ZEKXejZ
-->

<!-- 14. Xing
codepen: https://codepen.io/xing10/pen/mdmBWzw
-->

<!-- 15. 黃小瑄
codepen: https://codepen.io/5quvgp2z/pen/poPWeLQ
-->

<!-- 16. Sz
codepen: https://codepen.io/szyln/pen/wvdrJNj
-->

<!-- 17. lumei
codepen: https://codepen.io/l_umei/pen/KKmXWYJ
-->

<!-- 18. 肉鬆
codepen: https://codepen.io/klrkicog/pen/yLbzMmW
-->

<!-- 19. 蔡明達
Codepen: https://codepen.io/bmzpfyxe/pen/dyvBwyr
-->

<!-- 20. 大衛
Codepen: https://codepen.io/exnsrpjc/pen/PomJmPa?editors=1100-->

<!-- 21: yijun
codepen:
https://codepen.io/sandy3068/pen/WNjZjeY
-->

<!-- 22. 黃士桓
codepen: https://codepen.io/shr-huan-huang/pen/abWLWZm
-->

<!-- 23. Karen Huang
https://codepen.io/Coding_Snorlax/pen/GRmMWXv -->

<!-- 24. Elaine Liu
https://codepen.io/elaine7598/pen/jOmGmOJ -->

<!-- 25. Gui
https://codepen.io/guitimliu/pen/KKmXmVL -->

<!-- 26. huanan
https://codepen.io/hua_nan/pen/qBmPmjj -->

<!-- 27. Gill
https://codepen.io/Gill-Chin/pen/bGWoWKy -->

<!-- 28. Cate Chang
https://codepen.io/tutz/pen/abWLWWB -->

<!--29. Cheng Pei-hsuan
codepen: https://codepen.io/PaCheng/pen/NWjgjQb
-->

<!-- 30. Jameskrauser

https://codepen.io/jameskrauser/pen/BaRwRPE
-->

<!-- 31.curry
codepen:https://codepen.io/Ted19851223/pen/dyWVRmL
-->

<!-- 32.ZOE WU
https://codepen.io/Zoechiueh/pen/eYWGRgG?editors=0010
* 記得先設定 JS 引入 jQuery
* 正解提醒：使用 this
-->

<!-- 33. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/ExmwXLp
-->

<!-- 34.阿熊
https://codepen.io/hsiungchi/pen/QWvqMjO -->
<!-- 35.群嘉
https://codepen.io/efzdamnp-the-lessful/pen/MWmEvmP
不懂this的概念，所以修改了class
-->

<!-- 36. SihLe Huang
codepen:https://codepen.io/bugbug777/pen/xxdXPXJ
-->

<!-- 37. Jean
codepen:https://codepen.io/jean-liu/pen/BaRwWKR
-->

<!-- 38. axlrock1021
codepen: https://codepen.io/lnjbmmxo/pen/RwVLxRa
-->

<!-- 39. anna
codepen: https://codepen.io/annhys/pen/XWReVJy
-->

<!-- 40. hellocrab
https://codepen.io/hellocrab/pen/VwbMQEx
-->

<!-- 41. Oober
https://codepen.io/xtsjrjdv/pen/YzVrabK
-->

<!-- 42. 沈依蓉
https://codepen.io/lily-oa/pen/RwVLMdN
-->

<!-- 43. stepha
https://codepen.io/w1112yb/pen/mdmBqEg
-->

<!-- 44. Hi Annie
https://codepen.io/lhohdalu/pen/VwbMxdj
-->

<!-- 45. Riley
https://codepen.io/jjpxbprd/pen/RwVLJOe
-->

<!-- 46. KatieZhao
https://codepen.io/katiezhao/pen/qBmPYwZ
-->

<!-- 47.Sylvia-H
https://codepen.io/Cosmosheart/pen/RwVLebZ -->

<!-- 48. shanglin
https://codepen.io/rmovuagr-the-selector/pen/QWvqZre
-->

<!-- 49. 吐司
https://codepen.io/danielle-zhang/pen/QWvqJvE
-->

<!--50. 阿和
https://codepen.io/shnny/pen/abWLMgQ
-->

<!--51. YuriT
CodePen:
https://codepen.io/wenfisht/pen/GRmOKgO
-->

<!--52. KK
CodePen:
https://codepen.io/potatokaka/pen/xxdPxrW -->
<!--53.yella moon
codePen:
https://codepen.io/pwbzvqja/pen/3589f9dbb64a26f54e765ac483fbcfce
-->

<!-- 54. Ruby Chiang
Codepen: https://codepen.io/rubyyl0701/pen/PomONwE
-->

<!-- 55. Irene Wang
Codepen: https://codepen.io/irene-wang-the-looper/pen/yLbPJWz
-->

<!-- 54. 程翔
Codepen: https://codepen.io/xxxiang/pen/zYwPWzd
-->

<!-- 55. Jamie
Codepen: https://codepen.io/JamieChenWs/pen/abWVjYq
-->

<!-- 56.Calon
codepen: https://codepen.io/Calon0118/pen/LYyOXbQ
-->

<!-- 57.Erin Huang
codepen: https://codepen.io/ErinHuang/pen/gOWXVpb
-->

<!-- 58.sarah
codepen: https://codepen.io/sarah-wang/pen/VwbyZpP
-->

<!-- 59.jimmyFang
codepen: https://codepen.io/pohxiqqo/pen/MWmrYBX?editors=1010
-->

<!-- 60.Shani
codepen: https://codepen.io/ShaniMa/pen/rNmpVyX
-->

<!-- 60.Meng
codepen: https://codepen.io/MGHN/pen/GRmExgg
-->

<!-- 61.Yurie
codepen: https://codepen.io/_u_jung/pen/eYWyGNx
-->

<!-- 61.YMikan
codepen: https://codepen.io/elaine706/pen/jOmZbPR
-->

<!-- 62.LTL
codepen: https://codepen.io/ltlin93/full/XWRZdEv
-->

<!--63.WilsonHan
codepen: https://codepen.io/wi0821/pen/eYWMpGN
-->

<!--64.Benson
codepen: https://codepen.io/polarBear712/pen/yLbKYde
-->

<!--65.Jim Hwang
codepen: https://codepen.io/jimh1129/pen/MWmVLpV
-->

<!-- 66. irene
CodePen：https://codepen.io/lohas1107/pen/ZEKoLvd
-->

<!-- 67.AlvinChu
codepen:https://codepen.io/wave99487chu/pen/Pomemww
-->

<!-- 68.Tori
codepen: https://codepen.io/hayen/pen/ExmvYJE?editors=1010
-->

<!-- 69. 三隻小貓
https://codepen.io/bagelover/pen/qBmyBEw
不太懂為什麼用this會有差別-->

<!-- 69. Jessie Cheng
codepen: https://codepen.io/JessieMosbi/pen/wvdxXmB
-->

<!-- 70. ellie
https://codepen.io/hsu-yu/pen/wvdxQqJ
-->

<!-- 71. WA
https://codepen.io/ldddl/pen/GRmXjLd
-->

<!-- 72. 袁祥恩
https://codepen.io/ovfxsavp-the-bashful/pen/ExmepXe
-->

<!-- 73.Page
https://codepen.io/kanawin821/pen/oNWQbjr
-->

<!-- 74. ZY Hsu
https://codepen.io/zihyin/pen/MWmzpwQ?editors=1010 -->

<!-- 75. Min Chun Tsai
https://codepen.io/Tsai0926/pen/xxdQLgB
-->

<!-- 76.聿凌
https://codepen.io/igzdflpu/pen/dyWwyaw
-->

<!-- 77.陳品宏
https://codepen.io/wtka/pen/vYmvdbW
-->

<!-- 78.YOYO
https://codepen.io/lumedkle/pen/poPBpoz
-->

<!-- 79.黃羽均
https://codepen.io/azzfgtpo/pen/WNjWYJa
-->

<!-- 80.Joe Kuo
https://codepen.io/alertislow/pen/yLbWqzR
-->

<!-- 81.twoz
雖然成功了，但是有個問題呢...就是如果點上面標籤，也會造成切換效果....
https://codepen.io/twoz/pen/VwbJObB?editors=1111
-->

<!--82.Keep
https://codepen.io/keep-/pen/KKqZjwa
-->

<!-- 68.Jun Chan
codepen: https://codepen.io/chujunchan/pen/MWozVzZ
-->