---
# System prepended metadata

title: "\U0001F3C5 切版任務 Day12 - jQuery 點選按鈕動態切換 active 效果"
tags: [軟體工程師體驗營 - 2023]

---

---
tags: 軟體工程師體驗營 - 2023
---

# 🏅 切版任務 Day12 - jQuery 點選按鈕動態切換 active 效果

## 題目
複製此 [Codepen](https://codepen.io/hexschool/pen/mdzWvwB) 模板，練習運用 jQuery 
當點擊按鈕時，使按鈕切換成 `.active` 樣式。（只需撰寫 JS 區塊）

大致效果：

![](https://i.imgur.com/ZvlDPOl.gif)




## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）

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

<!-- 

解答：
https://codepen.io/hexschool/pen/YzJZBqN

-->


回報區
---

| 報數 |     Discord 名字     |                              Codepen／其他回饋                              |
|:----:|:--------------------:|:---------------------------------------------------------------------------:|
|  1   |     Rochel#4754      |          [Codepen](https://codepen.io/rochelwang1205/pen/vYVrNzb)           |
|  2   |     Berlin#7338      |             [Codepen](https://codepen.io/3qberlin/pen/wvYXKLK)              |
|  3   |   Kulimusoda#2785    |            [Codepen](https://codepen.io/yuch3n_chen/pen/YzJvyBB)            |
|  4   |    Izumi 泉#9691     |             [Codepen](https://codepen.io/kouta-f2e/pen/wvYXMwM)             |
|  5   |      Eero#1147       |            [Codepen](https://codepen.io/Eero-Chiao/pen/rNqKxed)             |
|  6   |    Ann Chou#0146     |           [Codepen](https://codepen.io/annchou_illu/pen/qBJKOgy)            |
|  7   | 不要迷戀媽的奶 #0295 |     [Codepen](https://codepen.io/kewdjbwp-the-typescripter/pen/RweJrab)     |
|  8   | Jennifer Chuang#3937 |              [Codepen](https://codepen.io/yujhen/pen/ZEqRQLr)               |
|  9   |     史滴芬#4310      |           [Codepen](https://codepen.io/steven870107/pen/KKGeVqX)            |
|  10  |      DeLi#8324       |           [Codepen](https://codepen.io/delichaomoon/pen/qBJKbxG)            |
|  11  |    Jacky7035#9423    |             [Codepen](https://codepen.io/adens123/pen/WNayrzE)              |
|  12  |    Ataraxia#9977     |           [Codepen](https://codepen.io/ataraxia8888/pen/abRwXvX)            |
|  13  |      snow#0255       |             [Codepen](https://codepen.io/snow21723/pen/jOeKWeZ)             |
|  14  |      SKey#9905       |            [Codepen](https://codepen.io/Dale-Chien/pen/PoyaZeG)             |
|  15  |      vvay#4113       |       [Codepen](https://codepen.io/pellmssx-the-sasster/pen/wvYXMOq)        |
|  16  |      Celia#1715      |       [Codepen](https://codepen.io/drdrvpgf-the-bashful/pen/mdzKVaE)        |
|  17  |     judy123#2363     |            [Codepen](https://codepen.io/hsuantsong/pen/OJBENJj)             |
|  18  |     黑白兔#0684      |             [Codepen](https://codepen.io/johnny329/pen/RweJrXG)             |
|  19  |     Snadra#1987      |             [Codepen](https://codepen.io/mlqmhltg/pen/JjmZXEY)              |
|  20  |    peihsuan#6315     |            [Codepen](https://codepen.io/peihsuanlai/pen/qBJKZNO)            |
|  21  |     jia yu#8896      |       [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/jOeKWmL)        |
|  22  |     Quantum#6093     |           [Codepen](https://codepen.io/Min-Hao-Hung/pen/MWPXyeL)            |
|  23  |   しあわせね#0036    |        [Codepen](https://codepen.io/Front-end-engineer/pen/poxKyVB)         |
|  24  |     銀光菇#1692      |           [Codepen](https://codepen.io/genesynthesis/pen/KKGezzG)           |
|  25  |      辣椒#1002       |           [Codepen](https://codepen.io/chilichen118/pen/WNaywWm)            |
|  26  |  bonnieli1414#4906   |     [Codepen](https://codepen.io/bonnieli1414/pen/LYgrNKL?editors=1111)     |
|  27  |    Daisy_li#4231     |        [Codepen](https://codepen.io/lidairong-gmail-com/pen/rNqKLNe)        |
|  28  |      汪汪#4486       |            [Codepen](https://codepen.io/hunwooooof/pen/BaqVzBv)             |
|  29  |      雲漢#5319       |              [codepen](https://codepen.io/keon981/pen/rNqKLOL)              |
|  30  |      冬天#5215       |              [Codepen](https://codepen.io/winter_/pen/zYmaBNZ)              |
|  31  |     JimWang#6134     |       [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/rNqKLzj)       |
|  32  |      gahwa#3562      |              [Codepen](https://codepen.io/gahwa17/pen/bGmKePE)              |
|  33  |      Akira#9996      |            [Codepen](https://codepen.io/Akira-Chen/pen/jOeKMOy)             |
|  34  |     Eden.C#9359      |              [codepen](https://codepen.io/iseden/pen/OJBEXGJ)               |
|  35  |       Hao#2485       |             [codepen](https://codepen.io/Seanfeb16/pen/WNayGex)             |
|  36  |       Uli#1946       |              [codepen](https://codepen.io/uli1313/pen/LYgrZwg)              |
|  37  |       翔.#0859       |           [codepen](https://codepen.io/energy95272z/pen/PoyaGjN)            |
|  38  |     ChaosTu#9311     |              [codepen](https://codepen.io/torotu/pen/XWxYjYy)               |
|  39  | K（アギルダー）#0386 |            [codepen](https://codepen.io/klay376014/pen/JjmZReQ)             |
|  40  |     jelly77#2088     |            [codepen](https://codepen.io/Ming-chiang/pen/WNayoNz)            |
|  41  |      Lychee KK       |             [Codepen](https://codepen.io/kakakala/pen/OJBERLP)              |
|  42  |    肉個阿倫#7172     |             [Codepen](https://codepen.io/i9574385/pen/jOeKVPK)              |
|  43  |      Rayo#8002       |             [Codepen](https://codepen.io/loborayo/pen/vYVrygx)              |
|  44  |     ray0304#2070     |              [Codepen](https://codepen.io/Ray0304/pen/jOeKBEy)              |
|  45  |      Kaya#8857       |             [Codepen](https://codepen.io/laron9486/pen/zYmaZKa)             |
|  46  |      姜承#8204       |             [Codepen](https://codepen.io/Troy0718/pen/jOeKmrp)              |
|  47  |     jimhop#6510      |            [Codepen](https://codepen.io/jimsansssss/pen/gOBKWMR)            |
|  48  |     jackwu#4437      |           [Codepen](https://codepen.io/jackwu1588003/pen/XWxYgPa)           |
|  49  |    司機叔叔#2463     |             [Codepen](https://codepen.io/bigv5566/pen/vYVrZVv)              |
|  50  |      Döng#2328       |       [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/mdzKMOd)        |
|  51  |     Evaxof#1266      |              [Codepen](https://codepen.io/evaxof/pen/YzJvrrZ)               |
|  52  |   N0c7iluc3n7#4390   |          [Codepen](https://codepen.io/huang-yu-cheng/pen/OJBExKo/)          |
|  53  |     PayRoom#8328     |            [CodePen](https://codepen.io/water38198/pen/bGmKYeJ)             |
|  54  |    吳偉雄恩#2256     |            [Codepen](https://codepen.io/Bamboo1212/pen/GRYGONY)             |
|  55  |       Yuu#5361       |             [Codepen](https://codepen.io/alycehwy/pen/RweJjvd)              |
|  56  |    alexmav04#5048    |             [Codepen](https://codepen.io/alexmav04/pen/NWOzwVG)             |
|  57  |   andrew0404#4576    |              [Codepen](https://codepen.io/Loonng/pen/jOeKZOx)               |
|  58  |      PoWei#8484      |         [Codepen](https://codepen.io/harrison-wei-lai/pen/GRYGxJG)          |
|  59  |      肉魚#2149       |             [Codepen](https://codepen.io/zoechen13/pen/XWxYExg)             |
|  60  |     wiimax#4564      |             [Codepen](https://codepen.io/willismax/pen/oNayMrP)             |
|  61  |      Zhong#8917      | [Codepen](https://codepen.io/klfjrlod-the-sasster/pen/OJBEoGW?editors=1111) |
|  62  |      yoyo#1003       |                  [Codepen](https://codepen.io/pen/vYVrVYG)                  |
|  63  |     alll6z#9204      |                [Codepen](https://codepen.io/A6Z/pen/MWPXzQy)                |
|  64  |      兔子#6746       |          [Codepen](https://codepen.io/CarrotDetector/pen/oNaywNe)           |
|  65  |     長方形#9612      |               [Codepen](https://codepen.io/imjjw/pen/wvYXRZd)               |
|  66  |     Tina02#2691      |       [codepen](https://codepen.io/riifwerr-the-selector/pen/WNayReW)       |
|  67  |      陳庭#3529       |           [codepen](https://codepen.io/yuting850309/pen/jOeKJaO)            |
|  68  |      ABOOS#6276      |             [codepen](https://codepen.io/guhungyin/pen/mdzKgNE)             |
|  69  |    liam9930#4129     |       [codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/vYVrqBW)        |
|  70  |      duck#3310       |             [codepen](https://codepen.io/papy0715/pen/vYVrPRz)              |
|  71  |    HsuanTang#1349    |             [codepen](https://codepen.io/HsuanTang/pen/LYgrKmQ)             |
|  72  |      Judy☻#7874      |       [Codpen](https://codepen.io/hsiaohan/pen/WNayqEV?editors=1111)        |
|  73  |      Janet#5784      |             [Codpen](https://codepen.io/janetlinnn/pen/qBJKzvo)             |
|  74  |      MitA#7407       |            [Codpen](https://codepen.io/qaz15996398/pen/WNayVVZ)             |
|  75  |      泊岸#3466       |            [Codpen](https://codepen.io/qoq77416416/pen/yLRqLPY)             |
|  76  |    Bruce-Lee#0629    | [Codpen](https://codepen.io/xxhdklwi-the-decoder/pen/oNaMXmY?editors=0110)  |
|  77  |      一瑋#8459       |             [CodePen](https://codepen.io/zerosula/pen/xxyzOEr)              |
|  78  |    David0799#4415    |             [CodePen](https://codepen.io/David0799/pen/XWxBbwJ)             |
|  79  |      冷曄#9378       |              [CodePen](https://codepen.io/HgHale/pen/LYgBGbg)               |
|  80  | charlottelee849#0366 |              [CodePen](https://codepen.io/char849/pen/oNaMLgW)              |
|  81  |  cJerry456789#9029   |             [CodePen](https://codepen.io/aria198a/pen/YzJjpBV)              |
|  82  |     jun777#2468      |            [CodePen](https://codepen.io/js18151102/pen/mdzjRyp)             |
|  83  |    變羊魔法#6372     |            [Codepen](https://codepen.io/cssf998811/pen/xxyJggg)             |
|  84  |     Lainie#1931      |             [Codepen](https://codepen.io/Lainie88/pen/bGmjaEN)              |
|  85  |     chichi#1534      |            [Codepen](https://codepen.io/chichihuang/pen/jOepaxN)            |
|  86  |    satarkuo#5736     |             [Codepen](https://codepen.io/SatarKuo/pen/ZEqjRvV)              |
|  87  |       YHT#1696       |               [Codepen](https://codepen.io/YHT31/pen/RweBjgM)               |
|  88  |     Maxine#9061      |            [Codepen](https://codepen.io/Maxine_Liao/pen/VwEBNQR)            |
|  89  |    henrykgb#5749     |          [Codepen](https://codepen.io/henrymorgan666/pen/QWZBXMP)           |
|  90  |      鉦勝#8333       |            [Codepen](https://codepen.io/atckmax823/pen/bGmxpyv)             |
|  91  |   RyanC893412#4835   |         [Codepen](https://codepen.io/mcdbfwcb-the-sans/pen/Exdeyoy)         |
|  92  |      penny#6214      |             [Codepen](https://codepen.io/penny8989/pen/VwEGjyM)             |
|  93  |     Aritan#1931      |              [Codepen](https://codepen.io/Aritan/pen/eYPLdXV)               |
|  94  |     Yvonne#2721      |        [Codepen](https://codepen.io/Evonne/pen/mdzGrYd?editors=1111)        |
|  95  |    townyuan#2653     |             [Codepen](https://codepen.io/townyuan/pen/zYmJNBx)              |
|  96  |     Hanana#9025      |             [Codepen](https://codepen.io/hananalin/pen/RweYgLx)             |
|  97  |      依依#6306       |             [Codepen](https://codepen.io/Rita-Yang/pen/RweYmeR)             |
|  98  |    andychiou#4830    |           [Codepen](https://codepen.io/andychiou1113/pen/VwEGoLX)           |
|  99  |     鄭舜仁#6606      |             [Codepen](https://codepen.io/randomno/pen/gOBBOPx)              |
| 100  |      betty#0693      |             [Codepen](https://codepen.io/betty-hu/pen/GRYYObd)              |
| 101  |       Rey#1878       |         [codepen](https://codepen.io/yfatgmpc-the-bold/pen/LYggepj)         |
| 102  |     ssshane#0673     |            [Codepen](https://codepen.io/sam6091260/pen/XWxxVOe)             |
| 102  |      homer#1525      |             [Codepen](https://codepen.io/Buckhorn/pen/MWPPBEx)              |
| 103  |     FiReBrO#0557     |             [Codepen](https://codepen.io/firebro42/pen/Exddrbe)             |
| 104  |      阿榮#8277       |            [Codepen](https://codepen.io/codeitaday/pen/YzJJeVm)             |
| 105  |     Tim123#8361      |             [Codepen](https://codepen.io/Wangtim4/pen/MWPzypv)              |
| 106  |     wendyli#2155     |     [Codepen](https://codepen.io/rockayumitw/pen/dygQgxx?editors=1011)      |
| 107  |   JasonChang#7847    |           [Codepen](https://codepen.io/jsonChangJava/pen/poxQMjB)           |
| 108  |    Sonia Wu#7154     |               [Codepen](https://codepen.io/YUJOU/pen/KKGbwwJ)               |
| 109  |   NathanJames#8120   |             [Codepen](https://codepen.io/ufo060204/pen/LYgMLdY)             |
| 110  |     Jenny真#7532     |            [CodePen](https://codepen.io/wei-chen-wu/pen/BaqvdwO)            |
| 111  |     weiting#3489     |             [CodePen](https://codepen.io/weiting14/pen/rNqPpZN)             |
| 111  |      狸貓#5863       |             [CodePen](https://codepen.io/tanuki320/pen/vYVbPyq)             |
| 112  |      東東#5015       |             [Codepen](https://codepen.io/wearymask/pen/zYmbBXM)             |
| 113  |      羽毛#5463       |            [Codepen](https://codepen.io/KYuFeather/pen/jOeJrXG)             |
| 114  |     lishuan#3698     |              [Codepen](https://codepen.io/lishuan/pen/wvYOgza)              |
| 115  |      小明#4408       |       [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/KKGELRP)        |
| 116  |    Jaredlee#5887     |             [Codepen](https://codepen.io/jared-lee/pen/NWOmzwE)             |
| 117  |      喬喬#2824       |            [Codepen](https://codepen.io/joanne-wei/pen/QWZPeVa)             |
| 118  |     杰_jie#9088      |              [Codepen](https://codepen.io/hmj8805/pen/yLRWePv)              |
| 119  |      FanJJ#8061      |              [Codepen](https://codepen.io/yfchenn/pen/gOBJpRo)              |
| 120  |      Tami#6742       |         [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/MWPdrZB)         |
| 121  |      柚子#3958       |             [Codepen](https://codepen.io/as6625998/pen/rNqgQzW)             |
| 122  |      又竹#7302       |               [Codepen](https://codepen.io/YO_ZU/pen/VwEJRRx)               |
| 123  |       QOO#8446       |              [Codepen](https://codepen.io/QOOQOOQ/pen/WNaVXvg)              |
| 124  |      小魚#8614       |            [Codepen](https://codepen.io/gizelliang/pen/gOQYxjJ)             |
| 125     |    pss940909#8650                  |                                                   [Codepen](https://codepen.io/pss940909/pen/QWJbaxz)                            |
| 126  |   路人ADCB#9851    |[Codepen](https://codepen.io/markyourpage/pen/NWEGaKE)|
|127|cmlb0212|[Codepen](https://codepen.io/Chungmin0212/pen/wvQKbEZ)|