Tab功能在很多的前端framework中是一個很常見的，我們只要套一下對應的Class及執行一段JS功能就可以實作出來了，可是還是不了解後面到底做什麼處理才會有這樣的結果，那我們今天就來用原生JavaScript實作一個出來，來看看這後面到底發生什麼事情吧！
Html
控制按鈕的部分：
第四行 href=””中會寫入javascript:void(0)主要是不執行a link的預設功能。class的部分有看到tablink 跟 testbtn這兩個class是稍後JavaScript要控制的元素，再來我們看到onclick=”openCity(event, ‘class1’)” 這串是執行JavaScript定義的function裡面有代入event跟對應的內容id。
內容的部份：
顯示隱藏的內容操作是以id=”class x”去做操作的，它對應的是你按鈕上面代入的id參數來指定你要哪個內容顯示隱藏
教學1內容 教學1內容 教學1內容教學2內容 教學2內容 教學2內容教學3內容 教學3內容 教學3內容教學4內容 教學4內容 教學4內容
JavaScript
function openClass(evt, className) {
var i, x, tablinks;
// x抓取頁面中的class="class"
x = document.getElementsByClassName("class");
//計算x的長度並將這些class="class"都進行display:none隱藏的動作
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
//tablinks 抓取頁面中的tablink
tablinks = document.getElementsByClassName("tablink");
//將tablinks代入for循環中並利用classList.remove刪除class="red" ，就是每執行一次function的時候就進行全部tablinks移除class="red"
for (i = 0; i < x.length; i++) {
tablinks[i].classList.remove("red");
}
//document.getElementById=className(函數帶進來的參數)樣式設定為display:block; 當前點擊的a link執行function 顯示出來對應的內容。
document.getElementById(className).style.display = "block";
//並對當前點擊的 a link 新增“red” 這個class
evt.currentTarget.classList.add("red");
}
//預設testbtn 這個class頁面一加載後執行click();的動作。也就是點擊了testbtn有這個class的按鈕來執行上方寫的function
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();
Codepen演示
以上範例有利用到的知識點：