組件實作 : Demo
Tab 組件是一種高互動性的組件，構造是由一個 Menu 選單和一個訊息框組合而成，當選單項目被選中時，會切換到對應的訊息框，藉此模擬資訊更新效果。而在 Tab 組件的實作上，原理會與 Slideshow 或是 Modal 的 display 用法相似。
Tab 有點神似切換分頁、更新內容的感覺，或者像是 AJAX 的用法？
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 facere
quis 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 dolorem
soluta saepe perspiciatis doloribus labore aut voluptates, officiis excepturi dignissimos reiciendis
placeat vel, a neque exercitationem adipisci? Porro sit distinctio perspiciatis obcaecati corporis nulla
itaque vero, temporibus consequatur illum in ducimus sunt vitae soluta, saepe inventore ipsum unde quis
mollitia, explicabo perferendis. Illo, vero quo? Necessitatibus eaque atque voluptates, molestias
expedita excepturi, maiores voluptatem mollitia pariatur quisquam culpa quos placeat similique, amet
aliquid obcaecati deleniti!
</p>
</div>
顯示結果：
當基本的內容架構建立好之後，這裡要開始實作選單的部分，我們要使用一個 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 個按鈕 。
在基本版面的設定上，起手式大同小異，這裡比較不一樣的地方是，我們在 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%;
}
顯示結果：
緊接著，這裡要來修改 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 選單到此，已經完成初步的調整。
調整好 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; */設定為
}
顯示結果：（排版前）
顯示結果：（排版後）
當面板整個切完之後，接下來要實作 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 背景顏色還是在改變後的狀態。
在實作 Tab 組件時，在處理切換功能的地方一直搞不定，一度想改成用 HTML + CSS 的寫法【3】來製作，但是 JavaScript 已經寫完了事件監聽，只差切換的功能還沒完成，這時放棄就太可惜了，於是就硬著頭皮的把功能做出來。這也讓我發現到，在用 JavaScript 去呼叫 CSS 這一塊，還有些特性沒有釐清，須要找時間補強．．．
iThome鐵人賽
看影片追技術