请看一下哪里有问题或哪里还可以优化，谢谢
来源：2-8 项目作业
慕后端9145261
2021-09-26 21:50:26
html:
<!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>
<link type="text/css" rel="styleSheet" href="./css.css">
</head>
<body>
<div class="contant">
<div class="main">
<a href="javascript:;">慕课手机</a>
</div>
<nav class="daohang">
<ul>
<li data-n='0' class="current">首页</li>
<li data-n='1'>外观</li>
<li data-n='2'>配置</li>
<li data-n='3'>型号</li>
<li data-n='4'>说明</li>
</ul>
<div class="line" id="line"></div>
<div class="button" id="button">立即购买</div>
</nav>
</div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
css:
*{
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: black;
font-size: 20px;
}
.contant{
width: 1300px;
background-color: white;
height: 70px;
margin: 0 auto;
position: relative;
}
.main{
width: 80px;
position: absolute;
left: 100px;
line-height: 70px;
}
nav{
position: absolute;
right: 0px;
width: 600px;
height: 70px;
top:50%;
margin-top: -35px;
}
ul{
width: 400px;
height: 70px;
}
li{
width: 75px;
float: left;
text-align: center;
line-height: 70px;
}
ul .current{
color: #f01400;
}
.button{
position: absolute;
right: 50px;
background-color: black;
color: white;
width: 100px;
float: left;
text-align: center;
height: 40px;
top:50%;
margin-top: -20px;
line-height: 40px;
}
.line{
position: absolute;
background-color:#f01400;
height: 3px;
width: 40px;
left: 58px;
bottom: 12px;
}
js:
(
function () {
let uls = document.getElementsByTagName('ul')[0];
let line = document.getElementById('line')
let lis = document.getElementsByTagName('li');
uls.onmouseover = function (e) {
if (e.target.tagName.toLowerCase() == 'li') {
var t=e.target.getAttribute('data-n');
line.style.left=58+75*t+'px';
for (let i = 0; i < 5; i++) {
lis[i].className = '';
}
e.target.className = 'current';
}
}
uls.onmouseleave = function () {
for (let i = 0; i < 5; i++) {
lis[i].className = '';
}
lis[0].className = 'current';
line.style.left='58px';
}
}
)();
1回答
-
好帮手慕然然
2021-09-27
同学你好，代码实现效果基本还可以，建议优化如下：
1、导航下划线移动时，建议添加过渡效果，代码修改如下
2、鼠标离开导航项时，建议下划线位于离开时的导航项下面，而不是回到第一个导航项下面，代码修改如下
祝学习愉快！
0
相似问题
回答 1
回答 1
回答 1
回答 2
回答 1