麻烦老师检查下，谢谢

来源：2-8 项目作业

Yuri沫

2022-05-03 11:10:30

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航滑动门特效</title>
    <link rel="stylesheet" href="slider.css">
    <script src="slider.js"></script>
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">慕课手机</div>
            <button class="buy_btn">立即购买</button>
            <nav class="menu_nav">
                <ul class="menu_list">
                    <li class="menu_item">
                        <a href="#" class="active_wd" data-index="0">首页</a>
                    </li>
                    <li class="menu_item">
                        <a href="#" data-index="1">外观</a>
                    </li>
                    <li class="menu_item">
                        <a href="#" data-index="2">配置</a>
                    </li>
                    <li class="menu_item">
                        <a href="#" data-index="3">型号</a>
                    </li>
                    <li class="menu_item">
                        <a href="#" data-index="4">说明</a>
                    </li>
                </ul>
                <div class="active_uc"></div>
            </nav>
        </div>
    </header>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    color: #000;
}
.container{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
header{
    width: 100%;
    height: 100px;
    line-height: 100px;
}
header .logo{
    float: left;
    font-size: 24px;
}
header .menu_nav{
    float: right;
    position: relative;
}
header .menu_list{
    list-style: none;
    overflow: hidden;
}
header .menu_list .menu_item{
    float: left;
    margin: 0 20px;
    width: 32px;
}
.active_wd{
    color: #f01400;
}
.active_uc{
    position: absolute;
    width: 32px;
    height: 3px;
    background-color: #f01400;
    left: 20px;
    top: 69px;
    border-radius: 3px;
    transition: left 0.5s ease 0s;
}
header .buy_btn{
    float: right;
    background-color: black;
    color: #fff;
    border: none;
    width: 100px;
    height: 40px;
    margin-top: 28px;
    margin-left: 20px;
    cursor: pointer;
}

window.onload = function(){
    const menuList = document.querySelector('.menu_list');
    const actUc = document.querySelector(".active_uc");
    const aList = menuList.querySelectorAll("a");

    menuList.addEventListener('mouseenter', e => {
        if(e.target.tagName.toLowerCase() == 'a'){
            const index = e.target.getAttribute('data-index');
            actUc.style.left = (20 + 72 * index) + 'px';

            for(const aitem of aList){
                aitem.className = "";
                if(aitem === e.target){
                    aitem.className = "active_wd";
                }
            }
        }
    },true);
}

写回答

1回答