整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文實例講述了JS實現的tab切換并顯示相應內容模塊功能。分享給大家供大家參考，具體如下：
思路：一層循環遍歷操作的元素并獲取當前遍歷到的元素的下標，通過下標去選擇顯示對應的內容模塊。
二層循環將元素恢復操作前的狀態。
<!--- JS -->
<!-- HTML -->
<!-- 效果 -->
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>
<!DOCTYPE html>
<html>
<head runat="server">
<title>JavaScript下拉菜單</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
font-family: verdana, sans-serif;
font-size: small;
}
#navigation, #navigation li ul {
list-style-type: none;
}
#navigation {
margin: 20px;
}
#navigation li {
float: left;
text-align: center;
position: relative;
}
#navigation li a:link, #navigation li a:visited {
display: block;
text-decoration: none;
color: #000;
width: 120px;
height: 40px;
line-height: 40px;
border: 1px solid #fff;
border-width: 1px 1px 0 0;
background: #c5dbf2;
padding-left: 10px;
}
#navigation li a:hover {
color: #fff;
background: #2687eb;
}
#navigation li ul li a:hover {
color: #fff;
background: #6b839c;
}
#navigation li ul {
display: none;
position: absolute;
top: 40px;
left: 0;
margin-top: 1px;
width: 120px;
}
#navigation li ul li ul {
display: none;
position: absolute;
top: 0px;
left: 130px;
margin-top: 0;
margin-left: 1px;
width: 120px;
}
</style>
<script type="text/javascript">
function displaySubMenu(li) {
var subMenu=li.getElementsByTagName("ul")[0];
subMenu.style.display="block";
}
function hideSubMenu(li) {
var subMenu=li.getElementsByTagName("ul")[0];
subMenu.style.display="none";
}
</script>
</head>
<body>
<ul id="navigation">
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">欄目1</a>
<ul>
<li><a href="#">欄目1->菜單1</a></li>
<li><a href="#">欄目1->菜單2</a></li>
<li><a href="#">欄目1->菜單3</a></li>
<li><a href="#">欄目1->菜單4</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">欄目2</a>
<ul>
<li><a href="#">欄目2->菜單1</a></li>
<li><a href="#">欄目2->菜單2</a></li>
<li><a href="#">欄目2->菜單3</a></li>
<li><a href="#">欄目2->菜單4</a></li>
<li><a href="#">欄目2->菜單5</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">欄目3</a>
<ul>
<li onmouseover="displaySubMenu(this)"
onmouseout="hideSubMenu(this)"><a href="#">欄目3->菜單1</a>
<ul>
<li><a href="#">菜單1->子菜單1</a></li>
<li><a href="#">菜單1->子菜單2</a></li>
<li><a href="#">菜單1->子菜單3</a></li>
<li><a href="#">菜單1->子菜單4</a></li>
</ul>
</li>
<li><a href="#">欄目3->菜單2</a></li>
<li onmouseover="displaySubMenu(this)"
onmouseout="hideSubMenu(this)">
<a href="#">欄目3->菜單3</a>
<ul>
<li><a href="#">菜單3->子菜單1</a></li>
<li><a href="#">菜單3->子菜單2</a></li>
<li><a href="#">菜單3->子菜單3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html> 首先獲取所有的li保存在集合中， 然后通過for循環遍歷每個li。當遍歷當相應的li后，再用內層for循環隱藏所有Tab對應的內容，取消li對應的樣式。內層for循環結束，顯示被選中li所對應的Tab框，恢復li的樣式。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>Tab切換特效</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
ul {
list-style-type:none;
}
ul li {
float:left;
width:80px;
height: 32px;
line-height: 32px;
text-align:center;
border:1px solid #eee;
cursor:pointer;
}
.allContent {
clear:both;
width: 400px;
height: 100px;
border:1px solid #bbb;
}
.dis {
display: none;
}
.liHover {
background-color:#F77;
}
</style>
<script type="text/javascript">
window.onload=function() {
var li_x=document.getElementsByTagName("li"); //獲取所有li標簽
//循環li，當對應的li被選中時，就顯示對應的div
for(var i=0;i < li_x.length;i++) {
//綁定每個li的下標，index屬性相當于數組中的下標
li_x[i].index=i;
//當鼠標停留在其中一個li上時，執行這個函數
li_x[i].onmouseover=function() {
for(var j=0;j < li_x.length;j++) { //遍歷所有li對應的div
//隱藏每個li所對應的div
var div_a=document.getElementById("tabCon"+j)
.style.display="none";
li_x[j].className=""; //同時清除每個li的樣式
}
//循環結束，顯示第一個被選中的li所對應的div
document.getElementById("tabCon"+this.index)
.style.display="block";
li_x[this.index].className="liHover"; //為選中的li加上樣式
}
}
}
</script>
</head>
<body>
<ul>
<li>語文</li>
<li>數學</li>
<li>dsfasf</li>
<li>啥sf</li>
<li>英語</li>
</ul>
<div class="allContent">
<div class="tabContent" id="tabCon0">中文是一門博大精深的語言</div>
<div class="tabContent dis" id="tabCon1">數學是很多學科的基礎</div>
<div class="tabContent dis" id="tabCon2">數學是很多學科的基礎</div>
<div class="tabContent dis" id="tabCon3">klfdssa;lkfdsalk</div>
<div class="tabContent dis" id="tabCon4">陰雨暗示法第三</div>
</div>
</body>
</html>*請認真填寫需求信息，我們會在24小時內與您取得聯系。
