組件實作 : Demo
一、前言
Tab 組件是一種高互動性的組件，構造是由一個 Menu 選單和一個訊息框組合而成，當選單項目被選中時，會切換到對應的訊息框，藉此模擬資訊更新效果。而在 Tab 組件的實作上，原理會與 Slideshow 或是 Modal 的 display 用法相似。
Tab 有點神似切換分頁、更新內容的感覺，或者像是 AJAX 的用法？
二、直接實作 Tab 組件
2.1 Tab 架構建立 - 內容
Tab 是由一個選單加上訊息框所組成，這里先說明訊息框里面有哪些東西。一個訊息框中由一個標題、一張圖片，以及一段文字所組成，我們總共需要三個訊息框，由于版面的關係，這里只先列出一個，其程式碼如下。
HTML：
<div id="content1" class="tabcontent"><h2>content1</h2><img src="https://source.unsplash.com/random/1920x1080?sig=1" /><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora impedit cupiditate ipsa, modi facerequis repudiandae cumque iste illo quae quos corrupti distinctio laudantium cum accusamus atque quo eius,libero id! Nesciunt autem possimus in, iure perferendis debitis ipsam rerum deserunt delectus doloremsoluta saepe perspiciatis doloribus labore aut voluptates, officiis excepturi dignissimos reiciendisplaceat vel, a neque exercitationem adipisci? Porro sit distinctio perspiciatis obcaecati corporis nullaitaque vero, temporibus consequatur illum in ducimus sunt vitae soluta, saepe inventore ipsum unde quismollitia, explicabo perferendis. Illo, vero quo? Necessitatibus eaque atque voluptates, molestiasexpedita excepturi, maiores voluptatem mollitia pariatur quisquam culpa quos placeat similique, ametaliquid obcaecati deleniti!</p></div>顯示結果：
2.2 Tab 架構建立 - 選單
當基本的內容架構建立好之后，這里要開始實作選單的部分，我們要使用一個 Class 名稱為 tab 的 div 將三個 Button 元素包起來，每個 Button 擇會對應一個內容。
HTML：
<div class="tab"><button class="tablinks" id="tab1">content1</button><button class="tablinks" id="tab2">content2</button><button class="tablinks" id="tab3">content3</button></div>顯示結果：
這里的圖片大小變成滿版，原因是因為我把圖片的解析度調成 1920x1080，在下一個小節中，會將版面調成適合的大小，同時也會把 CSS 的起手式完成。
此時會在畫面上看到 3 個按鈕 。
2.3 起手式格式設定
在基本版面的設定上，起手式大同小異，這里比較不一樣的地方是，我們在 body 元素中，將最大的寬度設為 960 像素，目的是不要讓整個畫面看起來過于不協調，將起手式加入之后，可以看到整個畫面水平置中對齊。
CSS：
* {margin: 0;padding: 0;list-style: none;}html {width: 100%;height: 100%;}body {max-width: 960px;margin: 0 auto;}img {width: 100%;}顯示結果：
2.4 Tab 選單樣式修改
緊接著，這里要來修改 Tab 選單的樣式，我們使用一個低調的灰色當作基底，當滑鼠的游標移到按鈕上時、Button 的背景色會變成更深的灰色。
CSS：
.tab {/* overflow: hidden; */border: 1px solid #ccc;background-color: #f1f1f1; /* border: 2px solid red; */display: flex;}.tab button {padding: 14px 16px;background-color: inherit;border: none;outline: none;transition: 0.5s;font-size: 1rem;cursor: pointer;/* border: 2px solid red; */}.tab button:hover {background-color: #ddd;}顯示結果：
Tab 選單到此，已經完成初步的調整。
2.5 內容樣式調整
調整好 Tab 選單后，再來是內容樣式的調整，這里有幾個可以稍微留意的地方，例如border-top屬性設定為 none，目的是為了讓選單和內容有融合在一起的感覺。另外，還有像是 text-align 設定為 justify，這是為了讓文字的排版左右對齊，看起來更加的美觀。最后的 display 注解起來，是為了要方便截圖，在使用上需要將其打開。
CSS：
.tabcontent {padding: 10px 16px;border: 1px solid #ccc;border-top: none; /* 顏色與.tab設定相同*/text-align: justify;/* display: none; */設定為}顯示結果：（排版前）
顯示結果：（排版后）
2.6 Tab 切換功能實作
當面板整個切完之后，接下來要實作 Tab 選單切換的功能，這里採用 JavaScript 的寫法，可參考的程式碼如下。
JavaScript：
var btn01 = document.getElementById("tab1");var btn02 = document.getElementById("tab2");var btn03 = document.getElementById("tab3");btn01.addEventListener("click",function () {openContent(event, "content1");},false);btn02.addEventListener("click",function () {openContent(event, "content2");},false);btn03.addEventListener("click",function () {openContent(event, "content3");},false);JavaScript：
function openContent(event, content) {var i, tabcontent, tablinks;tabcontent = document.getElementsByClassName("tabcontent");for (i = 0; i < tabcontent.length; i++) {tabcontent[i].style.display = "none";console.log(tabcontent[i]);}document.getElementById(content).style.display = "block";}顯示結果：
這里分別用了 3 個 Button 來對應三個不同的內容區塊，而在 Function 的呼叫上，這是對應相同一個 Function，其功能為先將所有的內容隱藏起來，然后再將當前選擇的內容給打開。
三、頁面書籤
在上一個章節中，我們沒有撰寫選中 Button 后的背景顏色，在這里將其補上。
CSS：
.tab button.active {background-color: #ccc;}JavaScript：
tablinks = document.getElementsByClassName("tablinks");for (i = 0; i < tablinks.length; i++) {tablinks[i].className = tablinks[i].className.replace(" active", "");}document.getElementById(content).style.display = "block";event.currentTarget.className += " active";JavaScript：（完整版）
var btn01 = document.getElementById("tab1");var btn02 = document.getElementById("tab2");var btn03 = document.getElementById("tab3");btn01.addEventListener("click",function () {openContent(event, "content1");},false);btn02.addEventListener("click",function () {openContent(event, "content2");},false);btn03.addEventListener("click",function () {openContent(event, "content3");},false);function openContent(event, content) {var i, tabcontent, tablinks;tabcontent = document.getElementsByClassName("tabcontent");for (i = 0; i < tabcontent.length; i++) {tabcontent[i].style.display = "none";console.log(tabcontent[i]);}tablinks = document.getElementsByClassName("tablinks");for (i = 0; i < tablinks.length; i++) {tablinks[i].className = tablinks[i].className.replace(" active", "");}document.getElementById(content).style.display = "block";event.currentTarget.className += " active";document.getElementById(content).style.display = "block";}顯示結果：
有感受到與之前的差異嗎？Tab 選單被選中，背景顏色會改變，滑鼠移出選單后，選中的 Button 背景顏色還是在改變后的狀態。
四、推薦資源
How TO - Tab HeadersHow TO - Hover Tabs36 CSS Tab Designs For A More Organized And Professional Looking Website15 CSS TabsCSS Tabs and sub tabs - CodePenTabs API - Material UI - MUI五、結論
在實作 Tab 組件時，在處理切換功能的地方一直搞不定，一度想改成用 HTML + CSS 的寫法【3】來製作，但是 JavaScript 已經寫完了事件監聽，只差切換的功能還沒完成，這時放棄就太可惜了，于是就硬著頭皮的把功能做出來。這也讓我發現到，在用 JavaScript 去呼叫 CSS 這一塊，還有些特性沒有釐清，須要找時間補強．．．
