整合营销服务商

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

免费咨询热线：

JS实现的tab切换并显示相应内容模块功能示例

JS实现的tab切换并显示相应内容模块功能示例

文实例讲述了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>

结果如下：


2.Tab效果

基本思想：

  • 通过DIV+CSS进行网页布局
  • 使用onmouseover()方法和display属性来控制不同的内容显示

首先获取所有的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>

效果如下：


在线咨询
上一篇：小积分、抽大奖，“临沭首发”APP积分抽奖活动火热开
下一篇：高度可定制JavaScript数据网格，无需第三方依

您的项目需求

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

推荐阅读
友情链接 龙里县 开平市 萨迦县 扬中市 普洱哈尼族彝族自治县 高港区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服