如何利用原生 JavaScript 實現 Tab 功能的選單

作者:

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

<div class="bar-block">
  <div class="container">
    <h5>選單</h5>
    <a href="javascript:void(0)" class="bar-item button tablink testbtn" onclick="openClass(event, 'class1')">教學1</a>
    <a href="javascript:void(0)" class="bar-item button tablink" onclick="openClass(event, 'class2')">教學2</a>
    <a href="javascript:void(0)" class="bar-item button tablink" onclick="openClass(event, 'class3')">教學3</a>
    <a href="javascript:void(0)" class="bar-item button tablink" onclick="openClass(event, 'class4')">教學4</a>
   </div>
  </div>

<div id="class1" class="container class">
教學1內容
教學1內容
教學1內容
</div>

<div id="class2" class="container class">
教學2內容
教學2內容
教學2內容
</div>
<div id="class3" class="container class">
教學3內容
教學3內容
教學3內容
</div>
<div id="class4" class="container class">
教學4內容
教學4內容
教學4內容
</div>

 

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演示

 

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

Element.classList

for

Document.getElementsByClassName()

document.getElementById()

發佈留言