原生js實現tab選項卡切換功能
阿新 • • 發佈：2018-11-12
本文通過兩種原生js方法實現tab選項卡切換功能
<!DOCTYPE html> <html> <head> <title>tab選項卡</title> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> li{list-style: none;} *{ margin:0px; padding:0px; } #tab{ position: relative; width: 600px; height: 400px; margin:50px auto; border: 1px solid #ccc; } .list_nav{ float: left; width: 199px; height: 50px; border-right: 1px solid red; background-color: #eee; text-align: center; line-height: 50px; } .active{ background-color: red; } .tab_nav{ display: none; position: absolute; top:50px; width: 100%; height: 350px; } .on{ display: block; } </style> </head> <body> <div id="tab"> <ul class="list"> <li class="list_nav active">1</li> <li class="list_nav">2</li> <li class="list_nav">3</li> </ul> <ul class="tab"> <li class="tab_nav on">1</li> <li class="tab_nav">2</li> <li class="tab_nav">3</li> </ul> </div> <script> //js實現tab選項卡互動 //方法一： var aList=document.getElementsByClassName("list_nav"), aTab=document.getElementsByClassName("tab_nav"), index=0; //用來儲存上一次的值 for(var i=0;i<aList.length;i++){ //閉包加函式自執行 (function(i){ aList[i].onclick=function(){ aList[index].classList.remove("active"); aTab[index].classList.remove("on"); index=i; aList[index].classList.add("active"); aTab[index].classList.add("on"); } })(i); } //方法二： var aList=document.getElementsByClassName("list_nav"), aTab=document.getElementsByClassName("tab_nav"); for(var i=0;i<aList.length;i++){ aList[i].index=i; //清除所有li的class aList[i].onclick=function(){ for(var i=0;i<aList.length;i++){ aList[i].classList.remove("active"); aTab[i].classList.remove("on"); } //給當前li新增樣式 aList[this.index].classList.add("active"); aTab[this.index].classList.add("on"); } } </script> </body> </html>