学习参考链接：https://blog.csdn.net/liyunxiangrxm/article/details/52035504
//步骤1：拿到所有的标题(li标签) 和 标题对应的内容(div)
//步骤2：循环监听鼠标移动，给样式（i循环里套鼠标移动事件， j循环对应，先清空样式，然后给当前样式）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<div id="tab_header">
<ul>
<li class="selected">first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
</div>
<div class="clr"></div>
<div id="tab_content">
<div class="content" style="display: block">666</div>
<div class="content">77</div>
<div class="content">7777</div>
<div class="content">777777</div>
</div>
</div>
</body>
<script>
//步骤1：拿到所有的标题(li标签) 和 标题对应的内容(div)
//步骤2：循环监听鼠标移动，给样式（i循环里套鼠标移动事件， j循环对应，先清空样式，然后给当前样式）
window.onload = function() {
// 拿到所有的标题(li标签) 和 标题对应的内容(div)
var oTab_header = document.getElementById("tab_header").getElementsByTagName('li');
var oContent = document.getElementById('tab_content').getElementsByClassName('content');
if (oTab_header.length != oContent.length) return;
for (var i = 0; i < oTab_header.length; i++) {
// 取出li标签(guifan)
var li = oTab_header[i];
li.id = i;
// 监听鼠标的移动
li.onmousemove = function() {
for (var j = 0; j < oTab_header.length; j++) {
oTab_header[j].className = '';
oContent[j].style.display = 'none';
}
this.className = 'selected';
oContent[this.id].style.display = 'block';
}
}
}
</script>
<style>
* {
margin: 0px;
padding: 0px;
}
#box {
height: 300px;
border: solid 1px #ddd;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#tab_header ul {
border-bottom: 1px solid #dddddd;
}
#tab_header ul li {
float: left;
font-family: '微软雅黑';
list-style: none;
background: #f1f1f1;
display: inline;
line-height: 40px;
padding: 10px 28px;
color: #333333;
cursor: pointer;
}
#tab_header ul li.selected {
background-color: white;
font-weight: bolder;
line-height: 40px;
padding: 10px 28px;
color: red;
border-bottom: 0;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}
.clr {
clear: both;
height: 0px;
}
#tab_content .content {
width: 100%;
height: 100%;
display: none;
}
</style>
</html>
网友评论