# 🏅 Day 35 - active 切換效果

今天要練習[第六週設計稿 - 職涯轉型區塊](https://www.figma.com/design/omevevD7bxbB3wQfL3jXR8/%E5%85%AD%E8%A7%92%EF%BD%9C%E8%81%B7%E6%97%85-WorkWay%EF%BD%9C%E8%81%B7%E6%B6%AF%E8%AB%AE%E8%A9%A2%E5%AA%92%E5%90%88-%EF%BC%88student-ver.%EF%BC%89?node-id=4047-17386&t=aNrz7NdgPc3Xs1Nk-0)的 active 切換效果

這裡會運用到 input radio 單選框的技巧，透過 [:checked 勾選狀態](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:checked)樣式來實現 active 切換效果。

### 使用方式
首先設置一組 radio 單選群組，將我們的主要內容區塊放入 label 標籤內
HTML

<div class="radio-buttons-container">
  <input type="radio" id="btn1" name="selection" value="option1" checked>
  <label for="btn1">
    <span class="button-text">按鈕一</span>
  </label>

  <input type="radio" id="btn2" name="selection" value="option2">
  <label for="btn2">
    <span class="button-text">按鈕二</span>
  </label>

  <input type="radio" id="btn3" name="selection" value="option3">
  <label for="btn3">
    <span class="button-text">按鈕三</span>
  </label>
</div>

再到 CSS 隱藏原生 radio 單選框樣式，藉由 label for 與 input id 綁定的技巧，讓使用者點擊 label 區塊來切換 radio 選項，修改 :checked 勾選狀態時相鄰的 label 區塊樣式，達到切換 active 樣式的效果
CSS

.radio-buttons-container {
  display: flex;
  gap: 15px;
  padding: 20px;
  margin: 50px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 隱藏原生的 radio 輸入框 */
input[type="radio"] {
  display: none;
}

/* label 按鈕基礎樣式 */
.radio-buttons-container label {
  padding: 12px 25px;
  border-radius: 8px;
  background-color: #f0f0f0;
  cursor: pointer;
  text-align: center;
}

/* 當 radio 被選中時，改變其相鄰 label 的樣式 */
input[type="radio"]:checked + label {
  background-color: #007bff;
  color: white;
}

<iframe height="300" style="width: 100%;" scrolling="no" title="🏅 Day 35 - active 切換效果" src="https://codepen.io/fhljksmg-the-styleful/embed/wBaZooK?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/fhljksmg-the-styleful/pen/wBaZooK">
🏅 Day 35 - active 切換效果</a> by 脆脆 (<a href="https://codepen.io/fhljksmg-the-styleful">@fhljksmg-the-styleful</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### 題目
使用此 [CodePen 模板](https://codepen.io/fhljksmg-the-styleful/pen/azOxooq?editors=1100)，試著修改 HTML 區塊的第三張卡片 input 標籤 `...` 處，讓 active 效果也能在第三張卡片實現。

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://codepen.io/fhljksmg-the-styleful/pen/xbGBMaM?editors=1100
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/ogjBVNw?editors=1100) |
| 02 | Tetsu |[Codepen](https://codepen.io/ttgchang/pen/LEpxaEL) |
| 03 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/EaVZMWW) |
| 04 | Nooooora | [Condpen](https://codepen.io/Nora-Ch/pen/ByopbdE?editors=1100)|
| 05 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/VYvPRKQ) |
| 06 | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/XJmpQRq?editors=1100) |
| 07 | Sam.S.T.Y |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/KwdaYQX?editors=1100) |
| 08 | 7lun |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/zxvNXpJ?editors=1100) |
| 09 | suemma |[Codepen](https://codepen.io/suemma/pen/yyYgWjw?editors=1100)
| 10 | 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/LEpxoqx?editors=1100)
| 11 | 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/raOjXEQ) |
| 12 | 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/EaVZzrP?editors=1000) |
| 13 | water | [Codepen](https://codepen.io/wateruby/pen/QwjpLBJ)|
| 14 | Leonard |[Codepen]( https://codepen.io/hyyfjqra-the-sans/pen/gbamOEJ?editors=1000) |
| 15 | Kiku |[Codepen](https://codepen.io/Kiku0110/pen/GgpWopb?editors=1100) |
| 16 | 平平 |[Codepen](https://codepen.io/ypinpin/pen/QwjppMd) |
| 17 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/dPYvNbW?editors=1100) |
| 18 | Pastor |[Codepen](https://codepen.io/peter_hung/pen/jEbBjyR) |
| 19 | ja4071 |[Codepen](https://codepen.io/SHAO-L/pen/gbaWbya) |
| 20 | PK |[Codepen](https://codepen.io/Percy-Ku/pen/Ggpmogz) |
| 21 | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/JoYNgeB)|
| 22 | 社子畢卡索 |[Codepen](https://codepen.io/pen?template=EaVXELV) |
| 23 | KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/GgpEQWJ?editors=1100) |
| 24 | Min |[Codepen](https://codepen.io/fhljksmg-the-styleful/pen/azOxooq?editors=1100) |
| 25 | 伊迪 |[Codepen](https://codepen.io/eku10rei/pen/PwPeNeE?editors=1100) |
| 26 | Celia |[Codepen](https://codepen.io/Cindy-Ho/pen/KwdGBzy) |
| 27 | Chris Wang |[Codepen](https://codepen.io/Wang-Chris/pen/WbQYKxo) |
| 28 | Rogan |[Codepen](https://codepen.io/RoganHsu/pen/zxveqwq?editors=1100) |
| 29 | Calvin |[Codepen](https://codepen.io/CalvinChang/pen/dPYxmJX) |
| 30 | NGNLzenos |[Codepen](https://codepen.io/hzpjunua-the-bashful/pen/pvggKYY) |
| 31 | 星雪糖 |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/EaKYvgo?editors=1000) |
<!-- 快速複製 -->
<!-- | 排序 | 姓名 |[Codepen](連結) | -->