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="button"
value="選單三" />
type="button"
value="選單四" />
div>
id="menu_content">
style="display:block;">hello,i am the first!div>
style="display:none;">hello,i am the seconed!div>
style="display:none;">hello,i am the third!div>
style="display:none;">hello,i am the forth!div>
div>
div>
var head_list = document.getelementbyid("head_list");
var menu_content = document.getelementbyid("menu_content");
var oli = head_list.getelementsbytagname("input");//獲取tab列表
var odiv = menu_content.getelementsbytagname("div");//獲取tab內容列表
for(var i=0 ; i//定義index變數，以便讓tab按鈕和tab內容相互對應
oli[i].onclick = function
( ) this.classname = "active";//為當前tab新增樣式
odiv[this.index].style.display="block";//顯示當前tab對應的內容}}
script>
body>
html>
JS原生Tab切換
因為在最近的asp.net專案中使用到前端中的tab切換，因這兩種方法在asp.net中的使用的差異，導致走了不少彎路，特下這篇分享，記錄下自己解決這個問題的心路歷程。使用前端的tab切換有兩種方法能夠實現 11 11注意 在使用js原生寫的時候，要記錄下對應的span下的序號，以便對下面的li進行...
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....
原生JS 回到頂部 tab欄的切換
回到頂部 html裡改變的頭部還有 回到頂部按鈕 js function my id 獲取頁面滾動距離的瀏覽器相容性問題 獲取頁面滾動出去的距離 function getscroll 獲取元素 注意 不能用top。top 是window自帶的乙個屬性，此屬性是唯讀的。此屬性預設是window物件 v...