使用原生 Javascript 写 tab 切换效果

思考流程

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

demo 网址

使用之前该理解的 Jacascript

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

来源：

JavaScript 教学

画面效果如下：

点击一个按钮（电子发票） 另外一个按钮的画面
不会出现。

tab 点击

面板

<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";              }          }       }       };