---
# System prepended metadata

title: "\U0001F3C5 Day 35 - active 切換效果"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 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 切換效果
![image](https://hackmd.io/_uploads/rkPfr9ySxl.png)


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

### 使用方式
首先設置一組 radio 單選群組，將我們的主要內容區塊放入 label 標籤內
HTML
```htmlembedded=
<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
```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://i.imgur.com/vftL5i0.png)

<!-- 解答：
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](連結) | -->