标签栏切换

<div class="tab-head">
							<ul>
								<li class="tab-head1 current"><a href="">猜你喜欢</a></li>
								<li class="tab-head1"><a href="">猜你喜欢</a></li>
								<li class="tab-head1"><a href="">猜你喜欢</a></li>
								<li class="tab-head1"><a href="">猜你喜欢</a></li>
							</ul>
						</div>
						<div class="tab-body">
							<div class="tab-body1 current1">111</div>
							<div class="tab-body1">222</div>
							<div class="tab-body1">333</div>
							<div class="tab-body1">444</div>
						</div>
					</div>

.tab{
	position: relative;
	width: 100%;
	height: 290px;
	margin-bottom: 10px;
}
.tab-left{
	width: 70%;
	height: 290px;
	border:1px solid #EEEEEE;
	float: left;
}
.tab-right{
	width: 28%;
	height: 290px;
	border:1px solid #EEEEEE;
	float:left;
	margin-left: 10px;
}
.tab-head{
	width: 100%;
	height: 40px;
	background-color: #EFEFEF;
	border-top:3px solid #FF0000;
}
.tab-head li{
	border-left: 1px solid lightgray;
	font-size: 20px;
	height: 38px;
	float: left;
	width: 24%;
}
.tab-head li a{
	line-height: 40px;
	margin-left: 24px;
}
.tab-head ul .current{
	background-color: #D3D3D3;
}
.tab-body{
	position:relative;
}
.tab-body div{
	position: absolute;
	width: 100%;
	height: 258px;
	background-color: red;
	display: none;
}
.tab-body .current1{
	display: block;
}

var tabs=document.getElementsByClassName("tab-head1");
var divs=document.getElementsByClassName("tab-body1");
for(var i=0;i<tabs.length;i++){
	tabs[i].onmouseover=function(){
		for(var	j=0;j<divs.length;j++){
			//和tabs[i]并没有关系，可以理解为就近原则
			if(tabs[j]==this){
				tabs[j].classList.add("current");
				divs[j].classList.add("current1");
			}else{
				tabs[j].classList.remove("current");
				divs[j].classList.remove("current1");
			}
		}
	}
}