---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 47

## nav-tabs
觀看 Bootstrap [導覽與頁籤](https://bootstrap5.hexschool.com/docs/5.1/components/navs-tabs)元件，使用 [data-bs-\*](https://bootstrap5.hexschool.com/docs/5.1/components/navs-tabs/#using-data-attributes) 讓下方程式碼可以動態切換分頁標籤

HTML：

<div class="container">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="artWorks-tab" data-bs-toggle="..." ... type="button" role="tab" aria-controls="home" aria-selected="true">Art Works</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="collection-tab" data-bs-toggle="..." ... type="button" role="tab" aria-controls="profile" aria-selected="false">Collection</button>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="artWorks" role="tabpanel" aria-labelledby="artWorks-tab">
      <h3>追求者送我的花</h3>
      <h3>我家窗前的鳥</h3>
    </div>
    <div class="tab-pane" id="collection" role="tabpanel" aria-labelledby="profile-tab">
      <p>區塊戀-他的私生活</p>
      <p>夏娃的醜聞</p>
      ...
    </div>
  </div>
</div>

> 需載入 [Bootstrap](https://bootstrap5.hexschool.com/docs/5.1/getting-started/introduction/#quick-start)（CSS、JS）

## 回報流程

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


<!-- 解答：https://codepen.io/hexschool/pen/oNqOGYG?editors=1000 -->

回報區
---

| Discord | CodePen / 答案 |
|:-----------------:|:--------------------------------------------------------------------:|
| 布魯諾#7239 | [ CodePen](https://codepen.io/bruno-yu/pen/KKoONvG?editors=1000) |
| Potatolee#7749 | [ CodePen](https://codepen.io/potatoleee/pen/poLMNWQ) |
| 大衛#4869 | [ CodePen](https://codepen.io/exnsrpjc/pen/zYWgoRO?editors=1010) |
| JackC#0411 | [ CodePen](https://codepen.io/key0329/pen/XWEvNzv) |
| bonnieli1414#4906 | [ CodePen](https://codepen.io/bonnieli1414/pen/LYdwbmZ?editors=1000) |
| WEI_RIO#9342 | [codepen](https://codepen.io/wei_wu/pen/XWEvNOJ?editors=1000) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/dymxOBR) |
| Clara#1275 | [Codepen](https://codepen.io/bsupixqu/pen/Yzampor) |
| azami#5986 |[CodePen](https://codepen.io/azami/pen/jOzgyBN)|
|Joyce#3790|[CodePen](https://codepen.io/joycehuang/pen/VwXoPbQ?editors=1010)|
| LHchien33#6232 |[CodePen](https://codepen.io/lin_chien/pen/jOzgyxP)|
| Cliff#4606 |[Codepen](https://codepen.io/Cliff_hex/pen/mdxNyaP?editors=1000)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/eYMqvBe)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/XWEvMdV)|
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/WNzVpRG) |
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/poLMeWr?editors=1000)|
| yuyu#6310 |[codepen](https://codepen.io/yuyu0905/pen/eYMqWVa)|
| 雷雷#7844 |[codepen](https://codepen.io/lei-yi-jie/pen/XWEvRoJ)|
|zera#6060|[codepen](https://codepen.io/zera-tseng/pen/oNqKwLe)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/bGvXreE) |
| PeggyLiao#1552 |[CodePen](https://codepen.io/PeiJu-Liao/pen/GRxVMKj?editors=1000)|
| L0F0#8733 | [CodePen](https://codepen.io/l0f0/pen/mdxNBwW?editors=1000) |
| 我是泇吟 #5189 | [CodePen](https://codepen.io/kljuqbxs/pen/xxWvYZo) |
| Hsiu#8767 | [CodePen](https://codepen.io/amy-hsiu/pen/ExEqEVy) |
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/ExEqRWB?editors=1000)|
|LinaChen#1796|[codepen](https://codepen.io/LinaChen/pen/RwMXmoR)|
|CloThEs#7837|[codepen](https://codepen.io/CloThEsZ/pen/XWEvwKO)|
| Amberhh #2465 | [Codepen](https://codepen.io/Amberhh/pen/mdxNMRN) |
| mei#8421 | [Codepen](https://codepen.io/Shila-Chen/pen/rNdXEjO?editors=1000) |
| QOO#8446 | [Codepen](https://codepen.io/QOOQOOQ/pen/eYMqwEJ) |
| peter.chen# | [Codepen](https://codepen.io/JIAN-RONG/pen/GRxVbPP?editors=1000) |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/oNqKrNB) |
|Jamie Wu#9345|[Codepen](https://codepen.io/Wu220103/pen/VwxZwBX)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/PoeYEqg?editors=1000)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/Rwybxmw?editors=1000)|
|Henry#7386|[Codepen](https://codepen.io/h1nr9/pen/zYjYKRE)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/gOzbmgB)|
|黑白兔#0684|[Codepen](https://codepen.io/johnny329/pen/xxjbYVz)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/NWMqvde)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/YzLqWOo)
|Vera#5592|[Codepen](https://codepen.io/skvera/pen/RwyVmjd)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/zYjPOmK)|