演示地址：演示
为每个标签页与相应的按钮设置class，根据不同位置的标签页做不同的变形处理，使用translate3d不会改变元素原本的位置因此不会导致浏览器对相关layout进行重计算，并且translate3d可以触发GPU加速，提升性能。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 body,html {
8 height: 100%;
9 width: 100%;
10 font-size: 10px;
11 }
12 #box {
13 position: absolute;
14 top: 0;
15 left: 0;
16 right: 0;
17 bottom: 0;
18 margin: auto;
19 border: 1px solid black;
20 width: 60rem;
21 height: 36rem;
22 overflow-x: hidden;
23 }
24 .nav {
25 width: 100%;
26 height: 6rem;
27 position: absolute;
28 top: 0;
29 left: 0;
30 }
31 .nav button {
32 display: inline-block;
33 background: black;
34 color: #fff;
35 width: 25%;
36 height: 100%;
37 border: none;
38 text-align: center;
39 border-right: 1px solid #fff;
40 box-sizing: border-box;
41 cursor: pointer;
42 }
43 .nav button:last-child {
44 border-right: none;
45 }
46 .content{
47 position: absolute;
48 top: 6rem;
49 left: 0;
50 width: 100%;
51 }
52 .content .tab {
53 position: absolute;
54 top:0;
55 width: 100%;
56 height: 30rem;
57 transition: transform .8s;
58 }
59 </style>
60 </head>
61 <body>
62 <div id="box">
63 <div class="nav">
64 <button class="btn0">page1</button><button class="btn1">page2</button><button class="btn2">page3</button><button class="btn3">page4</button>
65 </div>
66 <div class="content">
67 <div class="tab tab0" style="background: blue;left:0">tab two</div>
68 <div class="tab tab1" style="background: red;left:60rem">tab one</div>
69 <div class="tab tab2" style="background: yellow;left:120rem">tab three</div>
70 <div class="tab tab3" style="background: pink;left:180rem">tab four</div>
71 </div>
72 </div>
73 <script>
74 window.onload = function() {
75 slideTab('nav','tab',60);
76 }
77 function slideTab(rootName,tabName,width) {
78 var nav = document.querySelector('.'+rootName);
79 var len = document.querySelectorAll('.'+tabName).length;
80
81 nav.addEventListener('click',function(e) {
82 var name = e.target.className;
83 var pattern = /btn([0-9]+)/g;
84 var index = name.match(pattern)[0].slice(3);
85
86 for(var i = 0; i < len; i++) {
87 document.querySelector('.tab'+i).style.transform = 'translate3d('+ -width * index +'rem,0,0)';88 }
89 })
90 }
91 </script>
92 </body>
93 </html>