麻烦老师帮忙检查下

来源：2-8 项目作业

L_Tomato

2021-10-29 15:12:34

<!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; } section{ width: 100%; height: 100px; } h3{ width: 200px; line-height: 100px; float: left; margin-left: 200px; } #sct{ width: 800px; margin-left: 800px; } ul{ width: 400px; height: 40px; list-style: none; line-height: 100px; cursor: pointer; } ul li { width: 65px; float: left; } ul li.current { color: red; } .ss { width: 80px; height: 40px; margin-left: 350px; margin-bottom: 30px; background-color: black; position: relative; top: -12px; border-radius: 5px; } .ss p{ color: white; font-size: 16px; line-height: 40px; text-align: center; } #tips { width: 32px; height: 2px; border-bottom: 2px solid red; position: relative; top: 20px; transition: left .5s ease 0s; } </style></head>
<body> <section> <h3>慕课手机</h3> <div id="sct"> <ul id="list"> <li data-c='0' class="current">首页</li> <li data-c='1'>外观</li> <li data-c='2'>配置</li> <li data-c='3'>型号</li> <li data-c='4'>说明</li> </ul> <div id="tips"></div> <div class="ss"><p>立即购买</p></div> </div>
</section>
<script> var list = document.getElementById('list'); var tips = document.getElementById('tips'); var lis = list.getElementsByTagName('li'); list.onmousemove = function (e) { for (var i = 0; i < lis.length; i++) { lis[i].className = ''; } e.target.className = 'current'; if (e.target.tagName.toLowerCase() == 'li') { // 得到第几个选项 var c = e.target.getAttribute('data-c'); tips.style.left = c * 65 + 'px'; } } </script></body>
</html>

写回答

1回答