老师，请帮忙看看是否还有可优化的地方，谢谢
来源：2-8 项目作业
weixin_慕九州1031108
2021-12-10 11:51:04
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑动门特效</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<header>
<h2>慕课手机</h2>
<nav>
<ul id="menu">
<li data-n="home">
<a href="javascript:;" data-n="home">首页</a>
</li>
<li data-n="appearance">
<a href="javascript:;" data-n="appearance">外观</a>
</li>
<li data-n="config">
<a href="javascript:;" data-n="config">配置</a>
</li>
<li data-n="model">
<a href="javascript:;" data-n="model">型号</a>
</li>
<li data-n="explain">
<a href="javascript:;" data-n="explain">说明</a>
</li>
</ul>
<div class="outline" id="outline"></div>
<button class="btn">立即购买</button>
</nav>
</header>
<script src="js/move.js"></script>
</body>
</html>
header{
width: 100%;
overflow: hidden;
height: 90px;
position: relative;
}
header h2 {
position: absolute;
float: left;
width: 80px;
height: 30px;
line-height: 30px;
font-size: 18px;
top: 50%;
margin-top: -15px;
left: 100px;
}
header nav {
position: absolute;
float: right;
width: 450px;
height: 60px;
right: 120px;
bottom: 10px;
}
header nav ul {
width: 280;
/* height: 20px; */
list-style: none;
float: left;
}
header nav ul li {
float: left;
width: 40px;
height: 40px;
line-height: 40px;
margin-right: 20px;
}
header nav ul li:last-child{
margin-right: 0;
}
header nav ul li a {
text-decoration: none;
font-size: 14px;
color: #000;
}
header nav ul li a.current {
color: #f01400;
}
header .btn {
float: right;
width: 80px;
height: 30px;
margin-top: 10px;
margin-left: 10px;
background-color: #000;
color: white;
border: none;
outline: none;
cursor: pointer;
}
header nav .outline {
width: 25px;
height: 3px;
background-color: #f01400;
position: absolute;
bottom: 0px;
left: 42px;
}
(function () {
var outline = document.getElementById('outline');
var menus = document.getElementById('menu');
var menu_a = document.querySelectorAll('header nav ul li a');
var left = 42;
menus.onmouseover = function (e) {
if (e.target.tagName.toLowerCase() == 'li') {
var n = e.target.getAttribute('data-n');
for (var i = 0; i < menu_a.length; i++) {
if (menu_a[i].getAttribute('data-n') == n) {
menu_a[i].className = 'current';
outline.style.left = left + i * 60 + 'px';
outline.style.transition = 'left .5s ease 0s';
} else {
menu_a[i].className = '';
}
}
}
};
})();
1回答
-
好帮手慕小李
2021-12-10
同学你好，同学能用到所学的知识点来做出这个需求很棒，但老师测出了小bug。如下gif图：
当鼠标移入下一个或上一个导航时，出现了当前移入的导航没有添加上样式的问题。
解释如下：
对应的bug效果解释：
如gif图中，当鼠标移入首页时，首先打印的是ul，之后是a，当移出首页文字后出现的才是首页对应的li，这样才会进入if (e.target.tagName.toLowerCase() == 'li') {}，除此之外鼠标移入当前的标签不是li，就不会触发效果。
出现这样的情况是因为，同学把onmouseover事件绑定到了menus上，所以鼠标移入menus时，e.target.tagName就会触发ul与a的情况。
对于这道题的解决上老师不建议把事件绑定到menus上，因为一眼就可以看出是个list列表，那么我们直接把事件循环绑定到li上即可，建议如下：
这里要注意一点，老师把onmouseover事件换成了onmouseenter事件，使用onmouseover会由于冒泡出现当前移入的元素其中的子元素一起触发事件，而使用onmouseenter可以避免该问题。
优化后效果如下：
优化建议当刚进入页面时，首页颜色是黑色，建议给个选中状态。
同学自己试试，祝学习愉快。
0
相似问题
回答 1
回答 2