整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

javascript选项卡切换完整7部曲

javascript选项卡切换完整7部曲

.获取所有的选项卡标签

var olis=document.getElementsByTagName("li");

2.循环遍历所有选项卡标签

for(var i=0;i<olis.length;i++){

3.给每个Tab选项卡创造一个索引下标

olis[i].index=i;

4.动态绑定事件

olis[i].onmouseover=function(){

5.再次循环遍历 或者 找到要操作的层或列表

for(var j=0;j<olis.length;j++){

6.清除和隐藏所有元素的className和DIV/DL层

olis[j].className="";

document.getElementById("xxx-"+j).style.display="none";

}

用jq写选项卡，告别了繁琐的循环以及命名规范

基本原理：

1.当某一个btn被选中时，将这个btn的背景颜色设为橘色，其余兄弟btn背景颜色设为空（none）

2.如果子div与btn的索引相同，就将这个div显示而其他兄弟div隐藏

1).css函数参数2的回调函数方法；

2).原生get方法再转jq对象 再进行设置的方法

3).当前div使用show()方法，其余兄弟div使用hide()方法

关键字：get() siblings() show() hide() css()

html页：

4个btn,4个div

<div id="wrap">

<button>btn1</button>

<button>btn2</button>

<button>btn3</button>

<button>btn4</button>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

</div>

css页：

大盒子当前无样式，在实际开发中需要指定其宽高；第一个btn背景色为橘黄色；第一个子项div显示，其余兄弟div隐藏

#wrap div {

width: 300px;

height: 200px;

border: 1px solid red;

display: none;

}

#wrap div:nth-of-type(1) {

display: block;

/* 第一个子项div显示 */

}

#wrap button:nth-of-type(1) {

background: orange;

/* 第一个btn背景色为橘黄色； */

}

jquery页：

1)首先给btn绑定事件

$("#wrap button").click(function() {

//当btn被点击后发生的事件

})

关键字： click();

2) 当btn被点击时，设置当前选中btn颜色为橘色，并且将其他兄弟btn背景色为空：

$(this).css("background", "orange").siblings("button").css("background", "none")

关键字： $(this); css(); siblings()

3) 声明一个变量，这个变量保存了被选中的btn的下标

var $index=$(this).index();

　关键字：$index; $(this);index();

// 1：找到所有的子div，并且设置css样式，如果某个div的索引与btn的索引相同，就让他显示

$("#wrap div").css("display", function(i) {

if (i==$index) {

return "block";

}

return "none";

})

关键字：css() ; "display" ; i==$index;

b:通过get()方法将子div的索引与当前btn的索引绑定，然后再将这个索引转变成jq对象，再使用jq方法将对应div显示

1

$($("#wrap div").get($(this).index())).css("display", "block").siblings("div").css("display", "none")

由于get方法是js原生方法，所以应将其转成jq对象才能使用jq方法

关键字： $() ; $(this).index; get();css();siblings()

c:通过当前btn的索引绑定div的索引，进而将这个索引对应的div显示show(),并将其余的div兄弟元素隐藏hide()

$("#wrap div").eq($(this).index()).show().siblings("div").hide();

关键字：eq();$(this).index();show();hide()

这样，就完成了使用jQuery方法实现选项卡。

lt;!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>


在线咨询
上一篇：JavaScript中的函数及argument应用
下一篇：火山爆发也可以预测了？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 梁园区 高州市 浔阳区 黑山县 焦作 文水县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服