html手机页面选项卡 移动端网页纯原生js选项卡tab切换

适合移动网页纯原生js选项卡tab切换

*{ 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%;}

Tab1Tab2Tab3Tab4

1

2

3

4

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

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[i].start = i;

tabLi[i].onclick = function(){

var star = this.start;

for(var i = 0 ;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[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

endX=-windowWidth*tabList.length+windowWidth

init.back(tabBox,windowWidth,tar,0,endX,0.3);

}else if(dist

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';

},

}