<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>适合移动网页纯原生js选项卡tab切换</title>
<style>
*{ margin: 0; padding: 0}
ul,li{ list-style: none}
.tabClick{ background: #f3f3f3; overflow: hidden}
.tabClick li{ height:40px; line-height: 40px; width: 25%; float: left; text-align: center}
.tabClick li.active{ color: #099; transition: 0.1s; font-weight: bold}
.tabCon{ overflow: hidden}
.tabBox{ position: relative}
.tabList{word-break: break-all; width:100%;float:left; line-height:100px; text-align:center; color:#D3D3D3; font-size:36px; font-family: "Arial Black"}
.lineBorder{ height: 2px; overflow: hidden; border-bottom:1px solid #099; background: #f3f3f3}
.lineDiv{ background: #099; height: 2px; width: 25%;}
</style>
<body>
<!-- 代码部分begin -->
<div class="wrap" id="wrap">
<ul class="tabClick">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
<div class="lineBorder">
<div class="lineDiv"><!--移动的div--></div>
</div>
<div class="tabCon">
<div class="tabBox">
<div class="tabList">
1</div>
<div class="tabList">
2</div>
<div class="tabList">
3</div>
<div class="tabList">
4</div>
</div>
</div>
</div>
<script charset="utf-8">
window.onload = function (){
var windowWidth = document.body.clientWidth; //window 宽度;
var wrap = document.getElementById('wrap');
var tabClick = wrap.querySelectorAll('.tabClick')[0];
var tabLi = tabClick.getElementsByTagName('li');
var tabBox = wrap.querySelectorAll('.tabBox')[0];
var tabList = tabBox.querySelectorAll('.tabList');
var lineBorder = wrap.querySelectorAll('.lineBorder')[0];
var lineDiv = lineBorder.querySelectorAll('.lineDiv')[0];
var tar = 0;
var endX = 0;
var dist = 0;
tabBox.style.overflow='hidden';
tabBox.style.position='relative';
tabBox.style.width=windowWidth*tabList.length+"px";
for(var i = 0 ;i<tabLi.length; i++ ){
tabList[i].style.width=windowWidth+"px";
tabList[i].style.float='left';
tabList[i].style.float='left';
tabList[i].style.padding='0';
tabList[i].style.margin='0';
tabList[i].style.verticalAlign='top';
tabList[i].style.display='table-cell';
}
for(var i = 0 ;i<tabLi.length; i++ ){
tabLi[i].start = i;
tabLi[i].onclick = function(){
var star = this.start;
for(var i = 0 ;i<tabLi.length; i++ ){
tabLi[i].className='';
};
tabLi[star].className='active';
init.lineAnme(lineDiv,windowWidth/tabLi.length*star)
init.translate(tabBox,windowWidth,star);
endX= -star*windowWidth;
}
}
function OnTab(star){
if(star<0){
star=0;
}else if(star>=tabLi.length){
star=tabLi.length-1
}
for(var i = 0 ;i<tabLi.length; i++ ){
tabLi[i].className='';
};
tabLi[star].className='active';
init.translate(tabBox,windowWidth,star);
endX= -star*windowWidth;
};
tabBox.addEventListener('touchstart',chstart,false);
tabBox.addEventListener('touchmove',chmove,false);
tabBox.addEventListener('touchend',chend,false);
//按下
function chstart(ev){
ev.preventDefault;
var touch = ev.touches[0];
tar=touch.pageX;
tabBox.style.webkitTransition='all 0s ease-in-out';
tabBox.style.transition='all 0s ease-in-out';
};
//滑动
function chmove(ev){
var stars = wrap.querySelector('.active').start;
ev.preventDefault;
var touch = ev.touches[0];
var distance = touch.pageX-tar;
dist = distance;
init.touchs(tabBox,windowWidth,tar,distance,endX);
init.lineAnme(lineDiv,-dist/tabLi.length-endX/4);
};
//离开
function chend(ev){
var str= tabBox.style.transform;
var strs = JSON.stringify(str.split(",",1));
endX = Number(strs.substr(14,strs.length-18));
if(endX>0){
init.back(tabBox,windowWidth,tar,0,0,0.3);
endX=0
}else if(endX<-windowWidth*tabList.length+windowWidth){
endX=-windowWidth*tabList.length+windowWidth
init.back(tabBox,windowWidth,tar,0,endX,0.3);
}else if(dist<-windowWidth/3){
OnTab(tabClick.querySelector('.active').start+1);
init.back(tabBox,windowWidth,tar,0,endX,0.3);
}else if(dist>windowWidth/3){
OnTab(tabClick.querySelector('.active').start-1);
}else{
OnTab(tabClick.querySelector('.active').start);
}
var stars = wrap.querySelector('.active').start;
init.lineAnme(lineDiv,stars*windowWidth/4);
};
};
var init={
translate:function(obj,windowWidth,star){
obj.style.webkitTransform='translate3d('+-star*windowWidth+'px,0,0)';
obj.style.transform='translate3d('+-star*windowWidth+',0,0)px';
obj.style.webkitTransition='all 0.3s ease-in-out';
obj.style.transition='all 0.3s ease-in-out';
},
touchs:function(obj,windowWidth,tar,distance,endX){
obj.style.webkitTransform='translate3d('+(distance+endX)+'px,0,0)';
obj.style.transform='translate3d('+(distance+endX)+',0,0)px';
},
lineAnme:function(obj,stance){
obj.style.webkitTransform='translate3d('+stance+'px,0,0)';
obj.style.transform='translate3d('+stance+'px,0,0)';
obj.style.webkitTransition='all 0.1s ease-in-out';
obj.style.transition='all 0.1s ease-in-out';
},
back:function(obj,windowWidth,tar,distance,endX,time){
obj.style.webkitTransform='translate3d('+(distance+endX)+'px,0,0)';
obj.style.transform='translate3d('+(distance+endX)+',0,0)px';
obj.style.webkitTransition='all '+time+'s ease-in-out';
obj.style.transition='all '+time+'s ease-in-out';
},
}
</script>
<!-- 代码部分end -->
</body>
</html>
