Tab切换/Tab切换.html

	<!DOCTYPE html>
	<html>
	<head>
		<title>demo</title>
		<meta charset="UTF-8">
		<style>
			.tab {
				width: 600px;
				padding: 20px 10px;
				margin: 20px auto;
				border: 1px solid #ccc;
				border-radius: 4px;
			}
			ul,li {
				margin: 0;
				padding: 0;
			}
			li {
				list-style: none;
			}
			.tab-header {
				border-bottom: 1px solid #ccc;
			}
			.tab-header > li {
				float: left;
				padding: 10px 20px;
				color: red;
				cursor: pointer; //可点击或用a链接
				border-top: 1px solid #fff; //避免点击时产生1px的抖动
				border-left: 1px solid #fff; //避免点击时产生1px的抖动
				border-right: 1px solid #fff; //避免点击时产生1px的抖动
				
			}
			.tab-header .active {
				border: 1px solid #ccc;
				border-bottom-color: #fff;
				margin-bottom: -1px;
				border-radius: 4px 4px 0 0;
				color: #333;
			}
			.clearfix:after {
				content: "";
				display: block;
				clear: both;
			}
			.tab-content {
				padding: 20px 10px;

			}
			.tab-content > li{
				display: none;
			}
			.tab-content .active {
				display: block; 
			}
		</style>

	</head>
	<body>
		<div class="tab">
			<ul class="tab-header clearfix">
				<li class="active">选项1</li>
				<li>选项2</li>
				<li>选项3</li>
			</ul>
			<ul class="tab-content">
				<li class="active">内容1</li>
				<li>内容2</li>
				<li>内容3</li>
			</ul>
		</div>
		<div class="tab">
			<ul class="tab-header clearfix">
				<li class="active">选项1</li>
				<li>选项2</li>
				<li>选项3</li>
			</ul>
			<ul class="tab-content">
				<li class="active">内容1</li>
				<li>内容2</li>
				<li>内容3</li>
			</ul>
		</div>


		<script>

			function Tab(ct){
				this.ct = ct;
				this.init();
				this.bind();
			}

			
			Tab.prototype.init = function(){ //初始化变量函数
				this.tabLi = this.ct.querySelectorAll('.tab-header>li');
				this.tabContent = this.ct.querySelectorAll('.tab-content>li');
			}

			Tab.prototype.bind = function(){
				var _this = this;
				this.tabLi.forEach(function(tabLi){
					tabLi.onclick = function(e){
						var target = e.target;
						var index = [].indexOf.call(_this.tabLi,target);//_this代表整个类数组对象，没有indexOf方法，使用call方法
						_this.tabLi.forEach(function(li){
							li.classList.remove('active');
						})
						target.classList.add('active');
						_this.tabContent.forEach(function(content){
							content.classList.remove('active');
						})
						_this.tabContent[index].classList.add('active');
					}
				})
			}

		var tab1 = new Tab(document.querySelectorAll('.tab')[0])
		var tab2 = new Tab(document.querySelectorAll('.tab')[1])

		/*	this.tabLi = ct.querySelectorAll('.tab-header>li');
			this.tabContent = ct.querySelectorAll('.tab-content>li');
		
			this.tabLi.forEach(function(tabLi){
				tabLi.onclick = function(e){
					var target = e.target;
					var index = [ ].indexOf.call(_this.tabLi,target);//_this代表整个类数组对象，meiyouindexOf方法，使用call方法
					_this.tabLi.forEach(function(li){
						li.classList.remove('active');
					})
					target.classList.add('active');
					_this.tabContent.forEach(function(content){
						content.classList.remove('active');
					})
					_this.tabContent[index].classList.add('active');
				}
			})
		*/


/*

			var tabHeader = $(".tab-header");
			var tabHeaderLi = $$(".tab-header>li");
			var tabContentLi = $$(".tab-content>li");

			tabHeader.addEventListener("click",function(e){
				var clickNode = e.target;
				if(clickNode.tagName.toLowerCase() === "li"){
					for (var i = 0; i < tabHeaderLi.length; i++) { //移除所有类
					 	tabHeaderLi[i].classList.remove("active");
					 } 
					 clickNode.classList.add("active");  //给当前点击的节点添加类
					 var index = [].indexOf.call(tabHeaderLi,clickNode);//点击节点的位置下标
					 //console.log(index) 检查断点
					 for (var i = 0; i < tabContentLi.length; i++) {
					 	tabContentLi[i].classList.remove("active");
					 }
					 tabContentLi[index].classList.add("active");  
				}
			})
			//自定义函数
			function $(id) {
				return document.querySelector(id);
			}
			function $$(cls) {
				return document.querySelectorAll(cls);
			}
			*/


		</script>

	</body>
	</html>