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

# 🏅 切版任務 Day7 - jQuery 基礎教學＋點選按鈕動態切換 active 效果

## 說明
使用 jQuery 可以輕鬆地創建一個點擊時會套入 .active 的 class 於該 HTML 中，產生該元素 CSS 的變化。

> 請先觀看此[影片](https://www.youtube.com/watch?v=GVWOIP-HX70)學習 jQuery

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

大致效果：


## 回報流程

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


<!--

解答：
https://codepen.io/jmimiding4104/pen/bGJzaLa

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:------------:| ----------------------------------------------------------------------------- |
| 1 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/eYowWzr) |
| 2 | Meng | [Codepen](https://codepen.io/menglin1203/pen/yLrdbeP) |
| 3 | Larry | [Codepen](https://codepen.io/larrylinr5/pen/rNbEmyZ?editors=1011) |
| 4 | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/xxeodPe) |
| 05 | Aya | [Codepen](https://codepen.io/NoNameNote/pen/gOyNWdg) |
| 6 | jerry | [Codepen](https://codepen.io/sony791210/pen/zYXVwVV) |
| 7 | Michelle0417 | [Codepen](https://codepen.io/michelle0417/pen/wvZLdje) |
| 8 | yicheng | [Codepen](https://codepen.io/YiChengCHANG/pen/vYMqmQK) |
| 9 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/oNOrwNx) |
| 10 | Chingya | [Codepen](https://codepen.io/chingya1214/pen/yLrdXLG) |
| 11 | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/YzMoQWZ) |
| 12 | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/abxgwWd) |
| 13 | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/vYMqZmJ) |
| 13 | .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/abxgwVN) |
| 15 | 阿若 | [Codepen](https://codepen.io/skar5268/pen/oNOrwyw) |
| 16 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/gOyNRZj) |
| 17 | boin | [Codepen](https://codepen.io/boinji/pen/bGJPRWx) |
| 18 | s870012 | [Codepen](https://codepen.io/ykjeyncs-the-flexboxer/pen/dyLBWEM?editors=1111) |
| 19 | macihuang | [Codepen](https://codepen.io/macy1215/pen/YzMoQLr) |
| 20 | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/PogrmLj) |
| 21 | 白白 | [Codepen](https://codepen.io/YuBai/pen/gOyNmyO) |
| 22 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/oNOreqP) |
| 23 | Lauren | [Codepen](https://codepen.io/Lauren8/pen/LYvKjNQ) |
| 24 | JY | [Codepen](https://codepen.io/jylee0805/pen/qBwzXjo?editors=1010) |
| 25 | Yuwen | [Codepen](https://codepen.io/Yuwen-the-reactor/pen/abxgJgj) |
| 26 | sylviabuy | [Codepen](https://codepen.io/sylviabela/pen/oNOrGgV) |
| 27 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/OJGegzE) |
| 28 | hongru-LyNn | [Codepen](https://codepen.io/LyNnYWu/pen/NWmZaGd) |
| 29 | 阿宸 | [Codepen](https://codepen.io/xnocndjt-the-sans/pen/rNbEGyr) |
| 30 | Emma | [Codepen](https://codepen.io/huang_L/pen/rNbEGLK) |
| 31 | LYC | [Codepen](https://codepen.io/LY-C/pen/dyLBVOx) |
| 32 | LiLiLiLi | [Codepen](https://codepen.io/jungang0414/pen/vYMqWNx?editors=1010) |
| 33 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/xxeoXyv) |
| 34 | LGJason | [Codepen](https://codepen.io/j811108/pen/JjVQMGr) |
| 35 | Six | [Codepen](https://codepen.io/Max-kuo/pen/xxeopXp?editors=0010) |
| 36 | Eden |[Codepen](https://codepen.io/iseden/pen/gOyNomE)|
| 37 | Mionne |[Codepen](https://codepen.io/neohyntw/pen/OJGexex)|
| 38 | Maxine |[Codepen](https://codepen.io/Maxine0713/pen/gOyNXyd)|
| 39 | Chen |[Codepen](https://codepen.io/yingchangchen/pen/PogrQmz) |
| 40 | MY | [Codepen](https://codepen.io/ahmomoz/pen/MWRMQzq) |
| 41 | suandme | [Codepen](https://codepen.io/su-su-the-sans/pen/dyLBdqo?editors=1111) |
| 42 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/XWQLZLw) |
| 43 | user | [Codepen](https://codepen.io/barry91205/pen/oNOrpaa) |
| 44 | Ellie | [Codepen](https://codepen.io/Ellie-Chiang/pen/VwNJvmb) |
| 45 | leo.chang | [Codepen](https://codepen.io/s16777216/pen/NWmZYEo) |
| 46 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/BaEgxOa) |
| 47 | Zander | [Codepen](https://codepen.io/chuangmaster/pen/qBwzKVG) |
| 48 | yuling | [Codepen](https://codepen.io/igzdflpu/pen/wvZLdLp) |
| 49 | Andy_12 | [Codepen](https://codepen.io/lifann/pen/QWPXBbB) |
| 50 | Camila | [Codepen](https://codepen.io/camilalo/pen/vYMqzpQ) |
| 51 | 薛逢 | [Codepen](https://codepen.io/vogqyrrj-the-selector/pen/dyLBVpB) |
| 52 | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/jORjdaG) |
| 51 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/bGJPzxr) |
| 52 | BB | [Codepen](https://codepen.io/bryan-hsaio/pen/vYMqbzL) |
| 53 | Toung | [Codepen](https://codepen.io/Toung/pen/LYvKqWv) |
| 54 | oldan | [Codepen](https://codepen.io/Enix-Chien-/pen/QWPXYxO) |
| 55 | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/YzMoYpj) |
| 56 | mike_2049 | [Codepen](https://codepen.io/mike2049/pen/zYXVeMb) |
| 57 | Maca | [CodePen](https://codepen.io/uimaca/pen/MWRMxbx) |
| 58 | ninii傳教士 | [CodePen](https://codepen.io/niiniiii/pen/vYMqaKx?editors=1011) |
| 59 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/gOyNNMx)|
| 60 | Joey一針 | [Codepen](https://codepen.io/joeychou/pen/NWmZQOq) |
| 61 | 快樂小豬 | [Codepen](https://codepen.io/rtjowfyf-the-lessful/pen/zYXVgmP?editors=1111) |
| 62 | Jenny_7314 | [Codepen](https://codepen.io/Jenny_000/pen/MWRMXgE) |
| 63 | liugod3824🔥 |[Codepen](https://codepen.io/kjssvtkr-the-animator/pen/bGJXGbY)✔|
| 64 | yu.t_liu |[Codepen](https://codepen.io/YuT200053/pen/RwOXNyE)|
| 65 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/PogMNaG) |
| 66 | ss585801 | [Codepen](https://codepen.io/ss585801/pen/BaEXKRz) |
| 67 | sweewei | [Codepen](https://codepen.io/sweewei-Law/pen/xxevggb) |
| 68 |james867.|[Codepen](https://codepen.io/JCT34/pen/XWQvpZr?editors=1111)|
| 69 |tzhengliin|[Codepen](https://codepen.io/tzhengliin/pen/PogMOBQ)|
| 70 |Tanyaaaa|[Codepen](https://codepen.io/tanya77777/pen/YzMmwvJ)|
| 71 |arielyao|[Codepen](https://codepen.io/ArielYao822/pen/poBMaoR)|
|72|靜靜|[Codepen](https://codepen.io/iclai/pen/ZEZgrLa)|
| 73 | Winnie |[Codepen](https://codepen.io/codepen-io-winnie/pen/NWmQYdY)|
| 74 | Jiahe |[Codepen](https://codepen.io/Andywang-95/pen/rNbXvwM)|
| 75 | 黛西 |[Codepen](https://codepen.io/ChiashengLin/pen/dyLxjpG)|
| 76 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/QWPeBrZ)|
| 77 | Eileen |[Codepen](https://codepen.io/Eileen-io/pen/zYQOOdj)|
| 78 | asabulu_von_f |[Codepen](https://codepen.io/asabulu/pen/qBGWWzG)|
| 79 | peggy |[Codepen](https://codepen.io/peggy0419/pen/ExzYaKy)|
| 80 |maru3096|[Codepen](https://codepen.io/deamru/pen/JjqPKdq)|
| 81 | jimmy.0706 |[Codepen](https://codepen.io/WeiJun-Mao/pen/MWdgeVZ)|
| 82 | wei |[Codepen](https://codepen.io/Wei-the-sasster/pen/vYwBxar?editors=1111)|
| 83 | kevinwen2014 | [Codepen](https://codepen.io/wenwoo/pen/gOJYyxz) |
| 84 | CrystalLala | [Codepen](https://codepen.io/crystallala/pen/oNRNYaQ) |
|85| discat3119| [Codepen](https://codepen.io/dizzysoup/pen/KKLKXPK) |
|86|yo0x0oy |[Codepen](https://codepen.io/Dayton-Hsieh/pen/OJYJvNN)|
| 87 | Schnauzer | [Codepen](https://codepen.io/Cocker-Spaniel/pen/YzbKGyx) |
| 88 | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/PovwJgM) |
| 89 | emmayo | [Codepen](https://codepen.io/emmayo/pen/KKLwBpN)|
| 90 | Areta | [Codepen](https://codepen.io/Areta-Gu/pen/dyEoWbv)|
| 90 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/XWwbPoL)|
| 91 | 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/yLWNORe)|
| 92 | 真真瑋瑋 | [Codepen](https://codepen.io/Yujhen-Li/pen/zYQvOMo)|
| 93 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/ZENbLvK)|
| 94 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/xxNGzEO)|
<!--【快速複製】