老师哪里可以改进下

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

<!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标签里面吗？怎么操作呢