J12 选项卡 - 掘金

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<link rel="stylesheet" href="reset.min.css">
	<style>
	*{
		margin:0;
		padding:0;
	}
	li{
		list-style:none;
	}
    .tabBox{
		   margin:20px auto;
		   width:600px;
			 }
	.tabBox .tab {  }	
	.tabBox .tab li{
		  float:left;
		   padding:0 10px;
		   line-height:40px;
		   border:1px solid #EEE;
		   font-size:16px;
		   margin-right:10px;
		   background:#f6f7fb;
	  }
	  .tab li.active{
		  background:#fff;
		  border-bottom-color:#fff;
		  position: relative;
		  top:0;
		  z-index: 1;
		  	  }
	  div{
		display:none;
		width:600px;
		height: 100px;
		font-size:16px;
		padding:10px;
		border:1px solid #EEE;
		position: relative;
		top:-1px;
		  
	  }
	  div.active{
		  display:block;		  
	  }
	</style>
</head>
<body>
	<section class="tabBox" id="tabBox">
		<ul class="clear tab">
			<li class="active">读书</li>
			<li>运动</li>
			<li>编程</li>
			<li>睡觉</li>
		</ul>
		<div class="active">读书使我快乐！</div>
		<div>运动使我健康！</div>
		<div>编程使我开心！</div>
		<div>睡觉使我轻松！</div>
	</section>

	<!-- JS -->
<script>
	//方法一：每次点击索引从集合中获取，附上active
	var tabBox=document.getElementById("tabBox"),
    tabList=tabBox.getElementsByTagName("li"),
    conList=tabBox.getElementsByTagName("div");
    //    console.log(tabBox);
    //    console.log(tabList);
    //    console.log(conList);

	tabList[0].onclick=function (){
		for(var i=0;i<conList.length;i++){
			tabList[i].className="";
			conList[i].className="";
		}
		tabList[0].className="active";
		conList[0].className="active";
	}

	tabList[1].onclick=function (){
		for(var i=0;i<conList.length;i++){
			tabList[i].className="";
			conList[i].className="";
		}
		tabList[1].className="active";
		conList[1].className="active";
	}

	tabList[2].onclick=function (){
		for(var i=0;i<conList.length;i++){
			tabList[i].className="";
			conList[i].className="";
		}
		tabList[2].className="active";
		conList[2].className="active";
	}
	
	tabList[3].onclick=function (){
		for(var i=0;i<conList.length;i++){
			tabList[i].className="";
			conList[i].className="";
		}
		tabList[3].className="active";
		conList[3].className="active";
	}
</script>

<script>
  // 方案二：封装一个清空li div的样式，点击那个索引给谁样式为active
	var tabBox=document.getElementById("tabBox"),
    tabList=tabBox.getElementsByTagName("li"),
	conList=tabBox.getElementsByTagName("div");
	
	function changTab(index){
     for(var i=0;i<tabList.length;i++){
		 tabList[i].className="";
		 conList[i].className="";
	 }
	 tabList[index].className="active";
	 conList[index].className="active";
	}
	
	tabList[0].onclick=function(){
		changTab(0);
		}

	tabList[1].onclick=function(){
	changTab(1);
	}

	tabList[2].onclick=function(){
		changTab(2);
		}

	tabList[3].onclick=function(){
	changTab(3);
	}
</script>

<script>
    //方案三：自定义属性
	var tabBox=document.getElementById("tabBox"),
		tabList=tabBox.getElementsByTagName("li"),
		conList=tabBox.getElementsByTagName("div");
	
		function changeTab(index){
		for(var i=0;i<tabList.length;i++){
			tabList[i].className="";
			conList[i].className="";
		}
		tabList[index].className="active";
		conList[index].className="active";
		}

	for(var i=0;i<tabList.length;i++){
			tabList[i].my=i;
			tabList[i].onclick=function(){
				changeTab(this.my)
			}
	    }
</script>

<script>
   //方案四:使用let块级作用域
	var tabBox=document.getElementById("tabBox"),
	tabList=tabBox.getElementsByTagName("li"),
	conList=tabBox.getElementsByTagName("div");

	function changTab(index){
    for(var i=0;i<tabList.length;i++){
		tabList[i].className="";
		conList[i].className="";
	}
	tabList[index].className="active";
	conList[index].className="active";
	}

	for(let i=0;i<tabList.length;i++){
         tabList[i].onclick=function () {
			 changTab(i);
		 }
	}
</script>

<script>
   //方案五：使用闭包
	var tabBox=document.getElementById("tabBox"),
	tabList=tabBox.getElementsByTagName("li"),
	conList=tabBox.getElementsByTagName("div");

    function changeTab(index){
       for(var i=0;i<tabList.length;i++){
		 tabList[i].className="";
		 conList[i].className="";
	   }
	   tabList[index].className="active";
	   conList[index].className="active";
	}

	for(var i=0;i<tabList.length;i++){
         tabList[i].onclick=(function (i) {
			return function () {
				 changeTab(i);
			}
		 })(i);
	}
</script>

</body>
</html>