老师哪里可以改进下

<!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;
        }

        a {
            text-decoration: none;
        }

        .head {
            width: 1100px;
            height: 80px;
            margin: 0 auto;
            overflow: hidden;
            clear: both;
        }

        h1 {
            float: left;
            line-height: 80px;
        }

        .header-nav {
            float: right;
            width: 360px;
            height: 32px;
            position: relative;
            top: 50%;
            margin-top: -15px;
        }

        .header-nav .nav-list {
            float: left;
            width: 290px;
            height: 30px;
        }

        .header-nav .nav-list li {
            float: left;
            list-style: none;
            margin-right: 25px;
            line-height: 30px;
            height: 30px;
            width: 32px;
        }

        .header-nav .carousel {
            position: absolute;
            height: 3px;
            width: 32px;
            background-color: red;
            bottom: 0px;
            left: 0px;
            display: none;
            transition: left .3s ease 0s;
        }

        .header-nav .nav-list li a {
            color: black;
            display: block;
            height: 32px;
        }

        .header-nav .nav-list li a.current {
            color: red;

        }

        .header-nav .buy-button {
            float: left;
            width: 70px;
            background-color: black;
            color: white;
            border-radius: 4px;
            border: none;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <section class="head">
        <h1>慕课手机</h1>
        <nav class="header-nav">
            <ul class="nav-list" id="nav-list">
                <li><a href="javaScript:;" data-t="front">首页</a></li>
                <li><a href="javaScript:;" data-t="show">外观</a></li>
                <li><a href="javaScript:;" data-t="config">配置</a></li>
                <li><a href="javaScript:;" data-t="model">型号</a></li>
                <li><a href="javaScript:;" data-t="illus">说明</a></li>
            </ul>
            <div class="carousel" id="carousel"></div>
            <button class="buy-button">立即购买</button>
        </nav>
    </section>
    <script>
        var navList = document.getElementById('nav-list');
        var navlis = navList.getElementsByTagName('a');
        var carousel =document.getElementById('carousel');


        navList.onmouseover = function (e) {
            if (e.target.tagName.toLowerCase() == 'a') {
                //先进行排他操作
                for (var i = 0; i < navlis.length; i++) {
                    navlis[i].className = '';
                }
                e.target.className = 'current';

                //获取触碰到的data-t值
                var idx = e.target.getAttribute('data-t');
                //定义left移动距离
                var left;
                switch (idx) {
                    case 'front':
                        left = 0;
                        break;
                    case 'show':
                        left = 57;
                        break;
                    case 'config':
                        left = 114;
                        break;
                    case 'model':
                        left = 171;
                        break;
                    case 'illus':
                        left = 228;
                        break;
                    default:
                    carousel.style.display = 'none';
                }
                carousel.style.left = left + 'px';
                carousel.style.display = 'block';
            }
        }
        navList.onmouseleave =function(){
            for (var i = 0; i < navlis.length; i++) {
                    navlis[i].className = '';
                }
                carousel.style.display = 'none';
        }

    </script>
</body>

</html>

问题描述：我的data-t属性和class=“current”写在a标签里面，因为我发现写在li标签里的话，移动到a标签上的时候效果不显示，e.target.tagName也只获取到a标签，可以把data-t和current类写在li标签里面吗？怎么操作呢

下载视频

Snakk 2021-11-02

源自：“仿穷游”首页动态项目 2-8 项目作业