HTML

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			*{

				padding:0;

				margin:0;

			}

			li{ vertical-align:bottom;  list-style-type:none;}

			.tab{

				width:400px;

			}

			.tab_nav{

				width:100%;

				display: flex;

			    display: box;

			    display: -webkit-box;

			    display: -moz-box;

			    display: -ms-flexbox;

			    display: -webkit-flex;

			}

			.tab_nav li{

				position: relative;

				-webkit-box-flex: 1;

			    -moz-box-flex: 1;

			    -webkit-flex: 1;

			    -ms-flex: 1;

			    flex: 1;

				text-align:center;

				padding:10px 0;

				border:1px solid #e8e8e8;

				border-bottom:0;

				font-size: 12px;

				margin-left:5px;

				border-radius: 4px 4px 0 0;

				background: #fcfcfc;

				 cursor: pointer;

			}

			.tab_nav li:first-child{

				margin-left:0px;

			}

			.tab_nav li:active ,.tab_nav li.row{

				background: #fff;

			}

			.tab_cont{

				width:100%;

				border:1px solid #e8e8e8;

				box-sizing: border-box;

			}

		</style>

	</head>

	<body>

		<div class="tab" id="tab">

			<ul class="tab_nav" id="tab_nav">

				<li>首页</li>

				<li>首页</li>

				<li>首页</li>

			</ul>

			<div class="tab_cont" id="tab_cont">

				<div class="tab_contLi" style="display:none;">1</div>

				<div class="tab_contLi" style="display: none;">2</div>

				<div class="tab_contLi" style="display: none;">3</div>

			</div>

		</div>

	</body>

</html>

<script type="text/javascript" src="tab.js"></script>

<script>

	_myTab.openEvent({

		tab_nav:"tab_nav",//tab头部标签的ID

		tab_cont:"tab_cont",//tab切换时内容的ID

		tab_row:"row",//选中状态tab的类名

	/*	tab_index:1,//设置默认显示第几个*/

		tab_event:"click" //添加点击还是划入事件

	})

</script>

tabJS事件的封装

(function(window,undefined){

	var myTab=function(){};

	myTab.prototype = {

			openEvent:function(params){

				this.opt=params;

				this.tabdefault();

				this.tabEvent();

			},

			tabdefault:function(){

				var tab_navLi=document.getElementById(this.opt.tab_nav).getElementsByTagName("li");

				var tab_contDiv=document.getElementById(this.opt.tab_cont).children;

				if(this.opt.tab_index !== undefined && this.opt.tab_index !== " " ){

					tab_navLi[this.opt.tab_index].className="row";

				    tab_contDiv[this.opt.tab_index].style.display="block";

				}else{

					tab_navLi[0].className="row";

				    tab_contDiv[0].style.display="block";

				}

			},

			tabEvent:function(){

				var tab_navLi=document.getElementById(this.opt.tab_nav).getElementsByTagName("li");

				var tab_contDiv=document.getElementById(this.opt.tab_cont).children;

				var tab_event=this.opt.tab_event;

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

					//即时运行

					(function(i){

							tab_navLi[i].addEventListener(tab_event,function(){

								var Zindex=i;

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

									tab_navLi[j].className="";

									tab_contDiv[j].style.display="none";

								};

								tab_navLi[Zindex].className="row";

								tab_contDiv[Zindex].style.display="block";

						  });

					})(i);

				}

			}

	}

	window.myTab=myTab;

})(window,undefined);

var _myTab= new myTab();

　　

　　

封装tab切换事件的更多相关文章

  1. vue封装tab切换

    vue封装tab切换 预览: 第一种 通过父传子标题,子传父事件 子组件 <template> <div class='app'> <div class="ta ...

  2. 小程序的tab切换事件

    index.wxml代码 <view class="tab-left" > <view " bindtap="tab">tab ...

  3. JS tab切换事件

    $('ul.main-tab>li').on('mousedown', data, function() { var $this = $(this), $box = $('.main-tab-c ...

  4. tab切换插件开发

    我开发的tab切换插件,基于jquery库,实现tab标签页的切换.插件的名称为jquery.tabSwitch.js. 插件实现代码如下: ; (function ($) { $.fn.tabSwi ...

  5. vue -vantUI tab切换时 list组件不触发load事件解决办法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...

  6. 监听浏览器tab选项卡选中事件，点击浏览器tab标签页回调事件，浏览器tab切换监听事件

    js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...

  7. jq 折面板+tab切换（自己封装的插件哦！！）

    如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...

  8. Tab Bar Control 的封装和切换

    见视频0414 思路: 1.删除系统自带的TabBar.2.添加UIView,做成自定义的TabBar,覆盖原来的TabBar.3.添加对于的button和切换事件.

  9. WPF案例（－）模拟Windows7 Win+Tab切换

    原文:WPF案例(-)模拟Windows7 Win+Tab切换 一个使用Wpf模拟Windows7 Win+Tab页面切换的小程序,使用快捷键Ctrl+Down或Ctrl+Up在示例程序各个页面元素之 ...

随机推荐

  1. BZOJ 1779. [Usaco2010 Hol]Cowwar 奶牛战争

    传送门 考虑构建网络流模型 把一个流量看成一只奶牛的攻击过程,那么答案就是最大流 因为每只奶牛只能操作一波,所以构造分层图,一层相当于一步 第一层就是初始状态,从 $S$ 向所有 $J$ 奶牛连一条流 ...

  2. static的变量是放在哪里

    static的变量都放在数据段,但是初始值若为0则放在BSS节中.而初始值非零则放在数据节中. 数据节和BSS节都属于数据段.   顺便说说对象的存储,可分为三类:静态存储(static storag ...

  3. JavaScript 盖尔-沙普利算法

    最近在学 JavaScript , 为了尽快熟悉语法,决定移植以前写的盖尔-沙普利算法. c# 下的代码:https://www.cnblogs.com/aitong/p/10973774.html ...

  4. HBase学习记录

    HBase 使用docker搭建参考https://blog.csdn.net/baifanwudi/article/details/78498325 搭建好以后,网页端可以看到: terminal ...

  5. CentOS 7 下配置 Nginx + PHP7.1 + MariaDB 以及 Laravel 框架 2018.3.11

    CentOS 7 下配置 Nginx + PHP7.1 + MariaDB 以及 Laravel 框架 阿里云服务器的选择 当然是选择学生优惠啦.这里阿里云还提供了轻量级服务器这个选项,可以预装 LA ...

  6. ajax+node实现图片上传

    利用formData实现ajax上传图片后,保存图片到指定收藏夹,然后展示新重命名后的图片 html: <input type="file" id="uploadI ...

  7. case when使用的总结

    https://blog.csdn.net/changxiangyangy/article/details/86718551 前几天,为了给产品分析当前用户数据结构,写sql的时候使用到了case w ...

  8. C语言数组，指针小案例

    /* ============================================================================ Name : hello.c Autho ...

  9. java中的成员变量、类变量，成员方法、类方法 属性和方法区别

    成员变量:包括实例变量和类变量,用static修饰的是类变量,不用static修饰的是实例变量,所有类的成员变量可以通过this来引用. 类变量:静态域,静态字段,或叫静态变量,它属于该类所有实例共有 ...

  10. 给元素绑定 class

    <div id="app04"> <label v-bind:class="{'Class1':Class1}">sasjadjagd& ...