js實現tab切換功能

一、初始化html結構

class="tab"

id="tab">

class="active">工作日

休息日div>

class="tabdiv">

class="tabpane">

11111111111

div>

class="tabpane">

22222222

div>

div>

二、js**

var span = document.queryselectorall('#tab span'),       //css選擇器

div = document.queryselectorall('.tabpane');
for(var i=0;i//迴圈span標籤
span[i].idx = i;                                    
//給span乙個自定義的idx屬性，將i賦值進去，因為下邊的迴圈不能直接拿到這個迴圈的i
span[i].onclick = function
()        div[this.idx].style.display = 'block';           //給當前div顯示出來
this.classlist.add('active');                      //增加class
}}

原生js實現tab切換

lang en charset utf 8 tab切換title box head list input active style head id box id head list button value 選單一 class active type button value 選單二 type bu...

JS原生Tab切換

因為在最近的asp.net專案中使用到前端中的tab切換，因這兩種方法在asp.net中的使用的差異，導致走了不少彎路，特下這篇分享，記錄下自己解決這個問題的心路歷程。使用前端的tab切換有兩種方法能夠實現 11 11注意 在使用js原生寫的時候，要記錄下對應的span下的序號，以便對下面的li進行...

純js實現tab欄的切換

doctype html en utf 8 viewport content width device width,initial scale 1.0 document title tab ul li current item style head tab tab list current 商品介紹...