javascript實作tabs選項卡切換效果(自寫原生js)_javascript技巧

現在的頁面上有許多各種各樣的頁面效果，常用的有彈出層效果，無縫滾動效果，選項卡切換效果。今天分享一款自己用原生javascript寫的選項卡切換效果，由於本人水平有限，如有問題請指出。
效果圖如下：
 
html代碼：

複製代碼

複製代碼

複製代碼



複製代碼



複製代碼


程式碼如下:









a{color:#a0b3d6;}
.tabs{border:1px solid #a0b3d6;margin:100px;width:300px;}
tabs-nav a.tabs-nav a.tabs-nav a.tabs-nav a.tabs-nav a.tabs-nav a.tabs-nav a. {background:#eaf0fd;line-height:30px;padding:0 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6;float:left; tabs-nav .on{background:white;border-bottom:1px solid white;_position:relative;}
.tabs-content{padding:20px;border-top:1px solid #a0b3d6;margin-top:-1px ;}

首頁
技術
生活
作品

首頁首頁首頁首頁首頁首頁首頁首頁

技術技術技術技術技術技術技術技術技術技術

生活生活生活生活生活生活生活生活

作品作品作品作品作品作品作品作品作品

11111
22222
33333

1111111111111111111111111111111111

33333333333333333333333333333333333333333