Codepen滑块导航示例代码本地运行异常，附个人本地编写的相关代码

• 核心问题1：JS代码直接放在head标签内执行，此时body内的DOM元素还未渲染完成，document.querySelectorAll('.navbar-item') 会返回空列表，hover事件没有成功绑定到导航元素上，所以只有页面默认的第一个选中状态生效。
• 核心问题2：removeSelected 函数中的判断条件错误，querySelectorAll 永远返回类数组对象，就算没有匹配元素也不会为假，导致旧的选中状态无法被正常移除。
• 额外说明：本次功能全部使用原生JS实现，未调用任何jQuery语法，因此jQuery文件引用是否正常不影响该功能运行。

将以下代码保存为 .html 后缀的文件，直接双击即可运行，无需依赖外部CSS、JS文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>导航hover切换效果</title>
    <style>
        .wrapper {
            max-width: 1000px;
            width: 100%;
            margin: 0 auto;
            display: block;
        }

        /* Slider */
        .slider {
            max-width: 100%;
            width: 100%;
            padding: 20px 0;
            font-size: 18px;
        }

        .slider-item {
            display: none;
        }

        .slider-item--visible {
            display: block;
        }

        /* Navbar */
        .navbar {
            max-width: 100%;
            display: flex;
            align-items: flex-end;
            height: 8px;
        }

        .navbar-item {
            max-width: 33.3%;
            width: 100%;
            display: block;
            height: 5px;
            cursor: pointer;
            opacity: .5;
            transition: all .2s;
        }

        .navbar-item--selected {
            height:10px;
            opacity: 1;
        }

        /* 导航颜色配置 */
        .navbar-item:nth-child(1){
            background: salmon;
        }

        .navbar-item:nth-child(2) {
            background: lightblue;
        }

        .navbar-item:nth-child(3){
            background: #19be29;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="slider">
            <div class="slider-item slider-item--visible">
                hello item 1
            </div>
            <div class="slider-item">
                hello item 2
            </div>
            <div class="slider-item">
                hello item 3
            </div>
        </div>
        <nav class="navbar">
            <span class="navbar-item navbar-item--selected" data-position="1"></span>
            <span class="navbar-item" data-position="2"></span>
            <span class="navbar-item" data-position="3"></span>
        </nav>
    </div>

    <script type="text/javascript">
        const $navbars = document.querySelectorAll(`.navbar-item`);

        function removeSelected() {
            const $selected = document.querySelectorAll(`.navbar-item--selected, .slider-item--visible`);
            // 修正判断条件，判断返回结果长度是否为0
            if (!$selected.length) {
                return;
            }
            for (let each of $selected) {
                each.classList.remove("navbar-item--selected");
                each.classList.remove("slider-item--visible");
            }
        }

        for (let each of $navbars) {
            each.addEventListener("mouseover", function () {
                removeSelected();
                const position = each.getAttribute("data-position");
                const $item = document.querySelector(`.slider .slider-item:nth-child(${position})`)
                each.classList.add("navbar-item--selected")
                $item.classList.add("slider-item--visible");
            });
        }
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者dt123