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. C# 笔记 获取程序当前目录

    在C#中,我们有以下几种方式获取程序当前目录: Console.WriteLine(System.IO.Path.GetDirectoryName(Assembly.GetExecutingAssem ...

  2. BZOJ 4765(分块+树状数组)

    题面 传送门 "奋战三星期,造台计算机".小G响应号召,花了三小时造了台普通计算姬.普通计算姬比普通计算机要厉害一些 .普通计算机能计算数列区间和,而普通计算姬能计算树中子树和.更 ...

  3. [转]Linux Shell编程入门

    转自:http://www.cnblogs.com/suyang/archive/2008/05/18/1201990.html 从程序员的角度来看, Shell本身是一种用C语言编写的程序,从用户的 ...

  4. JavaScript学习笔记（基础部分）

    一.JavaScript简介: 概念:JavaScript是一种解释性的.跨平台的.基于对象的脚本语言,一般用于客户端来给HTML页面增加动态的功能. 组成: 1.ECMAScript,描述了该语言的 ...

  5. 二、spring的IoC

    IoC的基本认识 Inversion of Control:控制反转,就是将对象的创建权反转交给spring IoC的好处 传统方式的程序编写,底层的实现切换了,需要修改源代码 使用spring之后, ...

  6. cmd 编码格式

    相当于编辑器的声明为gbk格式编码,输出格式也是gbka = '中文' 就会以gbk编码为str,也只能以gbk解码. reload sys修改默认编码 在不指定编码的时候充当默认解码或者编码格式

  7. js常用算术运算符与一元运算符在做运算时不同类型的转换规则

    /** * 算术运算符:+, -, *, /, % * 当对非number类型的值进行运算(-, *, /, %)时,会将这些值先转换成number再运算,加法'+'运算除外, * 当对非number ...

  8. JS事件委托（事件代理，dom2级事件）

    一.前言 说实话,真问我什么是事件委托,我肯定gg,还好查了一下,原来就是我之前练习过的DOM2级事件的应用. 二.什么是事件委托? 事件委托就是当事件触发时,把要做的事委托给父元素(或父元素的父元素 ...

  9. Shell基本概述

    目录 Shell01--基本概述 1. Shell课程大纲介绍 2. 什么是Shell ? 3. 什么是Shell脚本 ? 4. 为什么要学Shell编程 ? 5. 学习Shell编程需要哪些知识 ? ...

  10. Future模式的简单实现

    /** * 数据接口 */ public interface Data { public String getResult(); } /** * 最终需要使用的数据模型 */ public class ...