<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签栏切换效果</title>
<style>
body,ul{margin:0;padding:0;}
ul{list-style:none;}
.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #222222;}
.tab-head{height:31px;}
.tab-head-div{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#222222;line-height:30px;text-align:center;cursor:pointer;color:#fff;}
.tab-head .current{background:#fff;border-bottom:1px solid #fff;color:#000;}
.tab-head-r{border-right:0;}
.tab-body-div{display:none;margin:20px 10px;}
.tab-body .current{display:block;}
</style>
</head>
<body>
<div class="tab-box">
<div class="tab-head">
<div class="tab-head-div current">标签一</div>
<div class="tab-head-div">标签二</div>
<div class="tab-head-div">标签三</div>
<div class="tab-head-div tab-head-r">标签四</div>
</div>
<!--jkdjfk?-->
<div class="tab-body">
<div class="tab-body-div current"> 1 </div>
<div class="tab-body-div"> 2 </div>
<div class="tab-body-div"> 3 </div>
<div class="tab-body-div"> 4 </div>
</div>
</div>
<script>
// 获取标签栏的所有标签元素对象
var tabs = document.getElementsByClassName(‘tab-head-div‘);
// 获取标签栏的所有内容对象
var divs = document.getElementsByClassName(‘tab-body-div‘);
for (var i = 0; i < tabs.length; ++i) { // 遍历标签部分的元素对象，从下标1到3，就是标签二到标签四
tabs[i].onmouseover = function() { // 为标签元素对象添加鼠标滑过事件
for (var i = 0; i < divs.length; ++i) { // 遍历标签栏的内容元素对象
if (tabs[i] == this) { // 显示当前鼠标滑过的标签
divs[i].classList.add(‘current‘);//为元素添加类
tabs[i].classList.add(‘current‘);
} else { // 当鼠标移动到标签一时，隐藏其他标签
divs[i].classList.remove(‘current‘);//移除类
tabs[i].classList.remove(‘current‘);
}
}
};
}
</script>
</body>
</html>
原文：https://www.cnblogs.com/qq1561942060/p/12736771.html