作业检查

来源：2-8 项目作业

陆小小

2021-09-22 10:42:17

<!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>导航滑动门</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .btn {
            float: right;
            margin-top: 7px;
            margin-right: 40px;
            border: 0;
            width: 80px;
            height: 35px;
            color: white;
            cursor: pointer;
            background-color: #000;
        }

        span {
            float: left;
            margin-left: 40px;
        }

        ul.nav {
            margin-left: 800px;
            float: left;
            list-style: none;
        }

        ul.nav li {
            float: left;
            cursor: pointer;
            margin-right: 40px;
        }

        ul.nav li.current {
            color: red;
        }

        div.box {
            height: 50px;
            line-height: 50px;
            background-color: #ccc;
        }

        div.underLine {
            display: inline-block;
            position: absolute;
            right: 456px;
            top: 38px;
            width: 40px;
            height: 3px;
            background-color: red;
            transition: right .5s ease 0s;
        }
    </style>
</head>

<body>
    <div class="box">
        <span>慕课手机</span>
        <ul class="nav" id="nav">
            <li data-n="0">首页</li>
            <li data-n="1">外观</li>
            <li data-n="2">配置</li>
            <li data-n="3">型号</li>
            <li data-n="4">说明</li>
        </ul>
        <button class="btn">立即购买</button>
        <div class="underLine" id="underLine"></div>
    </div>
    <script>
        //获取DOM元素
        var nav = document.getElementById('nav');
        var navLis = document.querySelectorAll('.nav li');
        var underLine = document.getElementById('underLine');
        //添加事件委托
        nav.onmouseover = function (e) {
            // alert(123);
            if (e.target.tagName.toLowerCase() == 'li') {
                //获取data-n的属性值
                var n = e.target.getAttribute('data-n');
                //排他操作
                for (var i = 0; i < navLis.length; i++) {
                    navLis[i].className = '';
                }
                //当前碰到的这个li，要加上current类
                e.target.className = 'current';

                //下划线移动
                // underLine.style.display = 'inline-block';
                underLine.style.right = 456 - n * 72 + 'px';
            }
        }
    </script>
</body>

</html>