現在的頁面上有許多各種各樣的頁面效果,常用的有彈出層效果,無縫滾動效果,選項卡切換效果。今天分享一款自己用原生javascript寫的選項卡切換效果,由於本人水平有限,如有問題請指出。
效果圖如下:
html代碼:
複製代碼
複製代碼
複製代碼
程式碼如下:
js-tabs 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 ;}
首頁首頁首頁首頁首頁首頁首頁首頁
技術技術技術技術技術技術技術技術技術技術
生活生活生活生活生活生活生活生活
作品作品作品作品作品作品作品作品作品
1111111111111111111111111111111111
33333333333333333333333333333333333333333