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>

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顯示

$($("#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>

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

</ul>

</div>

1</div>

2</div>

3</div>

4</div>

</div>

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.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>

</body>

在線咨詢

上一篇：JavaScript中的函數及argument應用
下一篇：火山爆發也可以預測了？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

javascript選項卡切換完整7部曲

您的項目需求