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參數來指定你要哪個內容顯示隱藏

 

JavaScript

 

Codepen演示

 

以上範例有利用到的知識點:

Element.classList

for

Document.getElementsByClassName()

document.getElementById()

Summary
【JavaScript筆記】利用原生JavaScript 做出Tab功能的選單
Article Name
【JavaScript筆記】利用原生JavaScript 做出Tab功能的選單
Description
Tab功能在很多的前端framework中是一個很常見的,我們只要套一下對應的Class及執行一段JS功能就可以實作出來了,可是還是不了解後面到底做什麼處理才會有這樣的結果,那我們今天就來用原生JavaScript實作一個出來,來看看這後面到底發生什麼事情吧!
Author
Publisher Name
小豬日常
Publisher Logo