JS原生Tab切換

2021-09-29 23:54:38 字數 402 閱讀 2328

因為在最近的asp.net專案中使用到前端中的tab切換,因這兩種方法在asp.net中的使用的差異,導致走了不少彎路,特下這篇分享,記錄下自己解決這個問題的心路歷程。

使用前端的tab切換有兩種方法能夠實現:

11

11

注意:在使用js原生寫的時候,要記錄下對應的span下的序號,以便對下面的li進行一一的對應進行內容的呈現和顯示。當然記錄的方法有也有其他的,這個暫時我就先用這一種。

11

11

注意其中獲取事件的觸發物件用的this是$(this),其中的獲取下標的方法用到的非常多是方法index()不是index切記。

在原生中index是屬性但是在jq中使用的是$(this).index()方法。

原生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欄的切換

回到頂部 html裡改變的頭部還有 回到頂部按鈕 js function my id 獲取頁面滾動距離的瀏覽器相容性問題 獲取頁面滾動出去的距離 function getscroll 獲取元素 注意 不能用top。top 是window自帶的乙個屬性,此屬性是唯讀的。此屬性預設是window物件 v...

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....