Codepen 代码不适用于我的本地文件——提供的代码

Question

我最近在提供代码笔的以下问题上得到了帮助： https://codepen.io/diego-fortes/pen/GRvRPzX

任何人都可以像在 codepen 中那样在本地计算机上将此代码获取到运行吗？如果是这样，你能提供那个代码吗？（我相信包含在同一文件夹中的 jquery 3.6.0 文件可能没有正确链接 --> 我的栏悬停在栏 1 上，只有当我悬停在其他栏上时光标才会改变）

任何帮助都会非常有用！谢谢

这是我在本地计算机上使用的 HTML、CSS 和 JS： JS:

<head>
    <script src="jquery-3.6.0.min.js"></script>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">

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

            function removeSelected() {
                const $selected = document.querySelectorAll(`.navbar-item--selected, .slider-item--visible`);

                if (!$selected) {
                    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>

</head>

HTML:

 <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>

</body>

CSS:

.wrapper {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

/* Slider */
.slider {
    max-width: 100%;
    width: 100%;
}

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

/* Meaningless styles (colors) */
.navbar-item:nth-child(1){
    background: salmon;
}

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

.navbar-item:nth-child(3){
    background: #19be29;
}

Answer 1

您的代码无效，因为您的 Javascript 高于 HTML.
在你的情况下，document.querySelector 不能 select 任何东西。

请将 JavaScript 代码移至 HTML.

的底部

<!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>
        .wrapper{
            max-width: 1000px;
            width: 100%;
            margin: 0 auto;
            display:  block;
        }
        
        /* Slider */
        .slider{
            max-width: 100%;
            width: 100%;
        }
        
        .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: 8px;
            opacity: 1;
        }
        
        /* Meaningless styles (colors) */ 
        .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>
        const $navbars = document.querySelectorAll(`.navbar-item`);


function removeSelected(){
    const $selected = document.querySelectorAll(`.navbar-item--selected, .slider-item--visible`);
    
    if (!$selected){
        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>

Codepen 代码不适用于我的本地文件——提供的代码

Codepen code doesn't work on my local files -- code provided

html

javascript

css

jquery

codepen