老师，请检查
来源：2-8 项目作业
慕芸芸
2023-02-03 14:22:08
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
nav{
width: 100%;
height: 100px;
border: 1px solid #000;
overflow: hidden;
}
nav .left{
float: left;
margin-left: 100px;
line-height: 100px;
}
nav .right{
position: relative;
float: right;
margin-right: 150px;
cursor: pointer;
}
nav .right li{
width: 60px;
text-align: center;
list-style: none;
float: left;
line-height: 100px;
}
nav .right li.current{
color: #f01400;
}
nav .right li a{
text-decoration: none;
display: inline-block;
width: 100px;
height: 50px;
background: #000;
color: white;
text-align: center;
line-height: 50px;
margin: 20px;
}
nav .kong{
position: absolute;
top: 70px;
left: 10px;
width: 40px;
height: 4px;
background: #f01400;
transition: all .5s ease 0s;
}
</style>
</head>
<body>
<nav>
<div class="left">慕课手机</div>
<div class="right">
<div class="kong" id="kong"></div>
<ul id="enter_ul">
<li class="current" data-n="0">首页</li>
<li data-n="1">外观</li>
<li data-n="2">配置</li>
<li data-n="3">型号</li>
<li data-n="4">说明</li>
<li>
<a href="javascript:;">立即购买</a>
</li>
</ul>
</div>
</nav>
<script>
var enter_ul=document.getElementById('enter_ul');
var kong=document.getElementById('kong');
enter_ul.onmouseover=function(e){
if(e.target.tagName.toLowerCase()=='li'){
for(var i=0;i<enter_ul.children.length;i++){
enter_ul.children[i].className='';
}
e.target.className='current';
var n=e.target.getAttribute('data-n');
kong.style.left=60*n+'px';
}
}
</script>
</body>
</html>写回答
1回答
-
好帮手慕久久
2023-02-03
同学你好，代码正确，可以优化一下。同学的代码中，每次鼠标移入都会创建一次变量n：
建议改成，只创建一次变量n，鼠标每次移入，只改变变量n的值：
另外，导航整体的边框建议去掉，效果不好看：
祝学习愉快！
0
