封装tab切换事件

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切换事件的更多相关文章

vue封装tab切换
vue封装tab切换预览: 第一种通过父传子标题,子传父事件子组件 <template> <div class='app'> <div class="ta ...
小程序的tab切换事件
index.wxml代码 <view class="tab-left" > <view " bindtap="tab">tab ...
JS tab切换事件
$('ul.main-tab>li').on('mousedown', data, function() { var $this = $(this), $box = $('.main-tab-c ...
tab切换插件开发
我开发的tab切换插件,基于jquery库,实现tab标签页的切换.插件的名称为jquery.tabSwitch.js. 插件实现代码如下: ; (function ($) { $.fn.tabSwi ...
vue -vantUI tab切换时 list组件不触发load事件解决办法
最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表瀑布流滚动加载,用于控制长列表的展示当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...
监听浏览器tab选项卡选中事件，点击浏览器tab标签页回调事件，浏览器tab切换监听事件
js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...
jq 折面板+tab切换（自己封装的插件哦！！）
如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...
Tab Bar Control 的封装和切换
见视频0414 思路: 1.删除系统自带的TabBar.2.添加UIView,做成自定义的TabBar,覆盖原来的TabBar.3.添加对于的button和切换事件.
WPF案例（－）模拟Windows7 Win+Tab切换
原文:WPF案例(-)模拟Windows7 Win+Tab切换一个使用Wpf模拟Windows7 Win+Tab页面切换的小程序,使用快捷键Ctrl+Down或Ctrl+Up在示例程序各个页面元素之 ...

随机推荐

Cocos2d-x之Vector<T>
| 版权声明:本文为博主原创文章,未经博主允许不得转载. Vector<T>是Cocos2d-x 3.x中推出的列表容器,在cocos2d-x3.0之前的版本是Array,因此它所能容 ...
C# DataTable转json 时间格式化
1.NewTonSoft.json public static string DataTableToJson(DataTable dt) { ) { return ""; } el ...
CTU Open 2018 Lighting /// 组合数递推二进制
题目大意: 给定n k 给定一个数的二进制位a[] 求这个数加上另一个二进制位<=n的数b 后能得到多少个不同的二进制位有k个1 的数样例 input10 51000100111 out ...
linux内核的简单介绍
linux的版本号分为两个部分:内核(Kernel)和发行套件(distribution)版本. 内核版本是linus领导下的开发小组开发出的系统内核的版本号,而发行套件是由其他组织或者厂家将linu ...
sub
Popen.communicate(input=None)¶Interact with process: Send data to stdin. Read data from stdout and s ...
PascalCase & camelCase & kebabCase
帕斯卡拼写法( 也叫大骆驼拼写法),一种计算机编程中的变量命名方法.它主要的特点是将描述变量作用所有单词的首字母大写,然后直接连接起来,单词之间没有连接符.比如: Age LastName Winte ...
【记录】Redis 基础
Redis可以存放五种类型 1:String(字符串) 2:List(列表) 3:Hash(字典) 4:Set(集合) 5:ZSet(有序集合) String (字符串) redis 127.0.0. ...
一、Nuget管理
一.注册账号 http://www.nuget.org 可用微软账户登录注册手机端授权二.打包Nuget 1.新建一个.NET Standard 的类库项目(取名类库) 更改方法 2.选择项目属性 ...
【MVC】Spring WebFlux
一.什么是 Spring WebFlux 下图截自 Spring Boot 官方网站: 结合上图,在了解 Spring WebFlux 之前,我们先来对比说说什么是 Spring MVC,这更有益我们 ...
vue中使用iview表单验证时this指针问题
需求使用iview,在提交时对值b进行验证,使其不能大于值a 实现 <Form ref="config" :model="config" :rules= ...

封装tab切换事件

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

随机推荐

热门专题