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. 树的直径(BFS)

    ][];];];];,,;vis[i]=; ; j <= n ; j++){ ){;//标记 res[j]=res[root]+; ; i <= n- ; i++){; data[b][a ...

  2. SpringMVC表单验证器

    本章讲解SpringMVC中怎么通过注解对表单参数进行验证. SpringBoot配置 使用springboot,spring-boot-starter-web会自动引入hiberante-valid ...

  3. go 学习之gorm

    gorm是一个饱受好评的orm框架,此处数据库我们以mysql为例 import ( "github.com/jinzhu/gorm" _ "github.com/jin ...

  4. [fw]GDT是在分段中為了相容real mode 跟 protected mode的產物

    在Protected Mode下,一个重要的必不可少的数据结构就是GDT(Global Descriptor Table). 为什么要有GDT?我们首先考虑一下在Real Mode下的编程模型: 在R ...

  5. Java原理领悟-线程池(Executor)

    线程池全面解析 什么是线程池? 很简单,简单看名字就知道是装有线程的池子,我们可以把要执行的多线程交给线程池来处理,和连接池的概念一样,通过维护一定数量的线程池来达到多个线程的复用. 线程池的好处 我 ...

  6. 【转】Pandas速查手册中文版

    本文翻译自文章:Pandas Cheat Sheet - Python for Data Science,同时添加了部分注解. 对于数据科学家,无论是数据分析还是数据挖掘来说,Pandas是一个非常重 ...

  7. DataX简介

    DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL.Oracle.SqlServer.Postgre.HDFS.Hive.ADS.HBase.TableStore(O ...

  8. 【彩彩只能变身队（第七组）】Alpha版

    演示总结 -by 彩彩只能变身组(第七组) Part one:功能简介 教师端——班级主页 教师端——创建班级 教师端——批改作业 教师端——作业上交情况 学生端——班级主页 学生端——作业上传 在开 ...

  9. Linux操作练习

    打印显示当前时间,格式是:20181209211008 [root@Centos7 ~]#date "+%Y%m%d%H%M%S" 实现晚上20:30自动关机 [root@Cent ...

  10. 拓展练习部分---打包压缩 及 RPM工具

    目录 打包压缩部分 1.linux下常见的压缩包类型有哪些 rpm 工具部分 打包压缩部分 1.linux下常见的压缩包类型有哪些 .zip .gz 会删除源文件 .bz2 会删除源文件 .tar.g ...