思考流程

資料 (model) > 事件 (event) > 介面 (View)

demo 網址

使用之前該理解的 Jacascript

for(迴圈) / function （函式）/ this / if...else
/ classList.remove /classList.add

來源：

JavaScript 教學

畫面效果如下：

點擊一個按鈕（電子發票） 另外一個按鈕的畫面
不會出現。

• tab 點擊
  

• 面板

• HTML 畫面

<div class="btn-group checkout-btn" role="group" id="tabs">
     <a href="#" class="btn active" >電子發票</a>
    <a href="#" class="btn" >郵寄發票</a>
</div>

window.onload = function (){
 // do something
}

在網頁中的所有的元素(包括元素的所有關聯檔案：圖片、音視訊、flash等)都完全載入到瀏覽器之後才執行。

指定dom

let tabLink = document.getElementById("tabs").querySelectorAll("a");

let tabContents = document.getElementById("tab-inner").querySelectorAll('.form-content');

let tabLink ==> 宣告按鈕 a tabContents
let tabContents ==> 宣告面板內容為 tabContents

事件操作：進行事件監聽 click 在跑 for 迴圈（在找每個 a 連結中
）執行 函式 panelDisplay

   for(let i = 0; i < tabLink.length; i++){
       tabLink[i].addEventListener('click',function(e){
        e.preventDefault();
         panelDisplay(this);
       
       });
       
   };

建立一個 function 名稱為 panelDisplay
賦予判斷條件為 class 有 active  時下面的面板會顯示，反之其他會隱藏內容

   function panelDisplay(activePanel){
          // Do something...
          for(let i =0;i<tabLink.length;i++){
                
            //設定條件tabLink ==activePanel 
            //將tablink代入for循環中並利用 if ...else 進行條件 classList.add增加class="active" ，就是每執行一次function的時候就進行全部tablinks增加class
           
              if(tabLink[i] == activePanel)
               // 假設目前的 tabLink 等於 activate, 改變他的class .active
              {
                tabLink[i].classList.add("active");
     // 顯示面板的display:block 
                tabContents[i].style.display="block";
                
              }else{
     // 假設目前的 ablink 不等於 activate, 刪除他的class .active
                tabLink[i].classList.remove("active");
                //隱藏 面板
                tabContents[i].style.display="none";
              }
          }
       }
  
     };