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. angularJS 入门知识

    模块:模块可以定义自己的控制器.服务.工厂类以及指令 模块可以依赖其他模块 模块两大常见错误: 定义模块的时候忘记第二个参数,变成使用模块而不是定义模块 使用模块的时候忘记引用依赖模块

  2. 用vim写go代码——vim-go插件

    GoImport:导入包 GoImport!:导入远程包 GoImportAs: 导入包并且重命名

  3. C++中的抽象类和接口

    1,在 C++ 语言中,并不直接支持面向对象中的抽象类和接口概念,但是 C++ 语言 却可以间接实现这些概念: 2,什么是抽象类: 1,面向对象中的抽象(其实就是分类)概念: 1,在进行面向对象分析时 ...

  4. Robot Framework +钉钉通知（Dingding[钉钉] Plugin）构建通知

    1.点击钉钉个人头像进入[机器人管理] 2.添加自定义机器人 3.创建机器人,选择通知群 4.完善机器人信息 5.复制机器人token(只需要连接access_token后面token) 6.进入je ...

  5. SetViewportOrgEx和SetWindowOrgEx

    在MM_TEXT映射模式下使用这两个函数. 对于 BOOL SetViewportOrgEx( HDC hdc, // 设备内容HANDLE int X, // 新Viewport的x坐标 int Y ...

  6. JS异步事件顺序：setTimeout,async,promise

    为什么最近更新那么频繁,还不是因为笔试的时候瞎了? 先说异步事件执行顺序的规则: 1. 定时器异步队列和promise队列不是同一队列,promise优先级高于setTimeout; 2. 创建pro ...

  7. 自动化运维工具ansible简单介绍

    ansible架构图 ansible安装(centos7环境下) yum update yum install ansible 验证ansible是否成功安装 ansible --version an ...

  8. v-bind属性,v-model属性，:model属性

    一.v-bind 1.将按钮的title(key)绑定为data里指定的值 强调<input type="button" value="按钮" v-bin ...

  9. 数据库索引（BTree索引和Hash索引）

    索引 索引是为了方便查找我们所需要的数据. mysql支持的索引数据类型 B-Tree索引的特点 B-Tree索引以B+Tree(树)的结构存储数据. B-Tree索引能够加快数据的查询速度: B-T ...

  10. node快速起web服务器

    首选,安装http-server模块 npm install http-server -g 在需要打开的静态页面的目录下,开启服务即可 http-server