<!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>
標簽欄切換效果
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。