tap栏切换 js

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div id="box">
	<div class="box-top">
		<span class="active">电影</span>
		<span class="">综艺</span>
		<span class="">电视剧</span>
	</div>
	<div class="box-foot">
		<ul>
			<li class="current">电影</li>
			<li>电视剧</li>
			<li>综艺</li> 
		</ul>
	</div>
</div>
	
</body>
</html>

*{
       	  margin: 0;
       	  padding: 0;
       }
       li{
       	list-style: none;
       }
       #box{
       	 margin: 200px;
       	  border: 1px solid #ccc;
       	  width: 600px;
       }
       .box-top{
           width: 615px;
           height: 60px; 
            border-bottom: 1px solid #ccc;
       }
       .box-top span{
       	display: inline-block;
       	width: 32%;
       	height: 100%;
       	line-height: 60px;
       	text-align: center;
       }
       .box-foot{
       	 padding: 10px;
       	 height: 200px;
       	 font-size: 30px;
       }
       .active{
       	 color:#fff;
       	 background-color: #bf35bd;
       	 font-size: 20px;
       	 
       }
       .current{
       	  font-weight: 600;
       	  display: block;
       }
       li{
       	display: none;
       }

        var  box=document.getElementById('box');
	var spans=box.getElementsByTagName("span");
	var lis=box.getElementsByTagName("li");
	for(var i=0;i<spans.length;i++){
		spans[i].setAttribute("index", i);
		//排他思想
		spans[i].onclick=function(){
			for(var i=0;i<spans.length;i++){
				//removeAttribute() 方法删除指定的属性。
				 spans[i].removeAttribute("class");
			}
			//setAttribute(string name, string value)：增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
			 this.setAttribute("class", "active");

			 for(var i=0;i<lis.length;i++){
			 	lis[i].removeAttribute("class");
			 }
			  var index = this.getAttribute("index");
            //lis[index].className = "current";
            lis[index].setAttribute("class", "current");
		}
	}

猜你喜欢