我最近得到了以下问题的帮助，其中提供了一个codependency:https://codepen.io/diego-fortes/pen/GRvRPzX
有人能让这段代码在本地计算机上运行吗?如果有，你能提供代码吗?(我相信在同一文件夹中包含的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;
}
你的代码不工作，因为你的Javascript.
在您的示例中，document.querySelector不能选择任何内容
请移动JavaScriptHTML底部的代码.
<!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>