这是我当前的代码。它可以显示您正在查看的位置，例如当您阅读“SEC 1”部分时，导航栏上的“SEC 1”会突出显示。当您点击导航栏上的“SEC 2”时，它应该跳转到“SEC 2”部分。 现在的问题是当你点击你想去的那一个时，前一个会突出显示。例如，如果您单击“SEC 2”，导航栏上的“SEC 1”会突出显示。因为我不知道代码有什么问题，所以我将其粘贴到这里。
如果你不知道问题是什么:运行第一个代码片段，点击导航栏上的 SEC 4，然后你就知道问题是什么了:跳转到 SEC 4 部分，但突出显示导航栏上的 SEC 3。 (最新的 Chrome 和最新的 Windows 10)
我需要的功能:
- 突出显示 SEC- 我目前正在导航栏上阅读
- 跳转到 SEC- 我点击了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>TEST</title>
<style type="text/css">
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
}
header {
padding: 1em;
}
nav {
position: sticky;
top: 0;
color: #000;
background-color: yellow;
border-bottom: 2px solid yellow;
}
nav ul {
list-style: none;
margin: 0;
padding: 1em 1em 1em 0;
}
nav ul li {
display: inline;
}
nav ul li a {
display: inline;
color: #000;
text-decoration: none;
padding: 1em;
}
nav ul li a.current {
border-bottom: 2px solid blue;
}
main {
}
section {
padding: 5em 1em 1em 1em;
}
footer {
background-color: #000;
color: #fff;
margin-top: 5em;
padding: 1em;
}
</style>
</head>
<body>
<header> Header here </header>
<nav>
<ul>
<li><a href="#section-1">SEC 1</a></li>
<li><a href="#section-2">SEC 2</a></li>
<li><a href="#section-3">SEC 3</a></li>
<li><a href="#section-4">SEC 4</a></li>
</ul>
</nav>
<main>
<section id="section-1">
<h3>SEC 1</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum sit amet justo donec enim diam vulputate ut pharetra. Et ultrices neque ornare aenean. Vulputate mi sit amet mauris commodo. Pulvinar mattis nunc sed blandit. Aliquam ut porttitor leo a diam sollicitudin tempor. Dolor purus non enim praesent elementum facilisis leo. Consequat semper viverra nam libero justo laoreet sit amet. Ornare suspendisse sed nisi lacus. Sed viverra tellus in hac habitasse. Malesuada fames ac turpis egestas maecenas pharetra convallis. Sed adipiscing diam donec adipiscing tristique risus. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Pretium aenean pharetra magna ac placerat. Tellus integer feugiat scelerisque varius.</section>
<section id="section-2">
<h3>SEC 2</h3>
Duis tristique sollicitudin nibh sit amet. Facilisis leo vel fringilla est. Erat nam at lectus urna. Ut sem viverra aliquet eget sit amet tellus. Vulputate sapien nec sagittis aliquam. Tortor condimentum lacinia quis vel. Eget magna fermentum iaculis eu. In tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Sollicitudin tempor id eu nisl nunc. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Velit laoreet id donec ultrices tincidunt. Facilisi nullam vehicula ipsum a arcu. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Vitae purus faucibus ornare suspendisse sed nisi lacus. A arcu cursus vitae congue mauris rhoncus aenean.</section>
<section id="section-3">
<h3>SEC 3</h3>
Aliquam sem et tortor consequat. Faucibus in ornare quam viverra orci sagittis eu volutpat odio. Vel eros donec ac odio tempor orci dapibus ultrices. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. At auctor urna nunc id cursus metus aliquam eleifend. Consequat mauris nunc congue nisi vitae. In massa tempor nec feugiat nisl pretium fusce. At imperdiet dui accumsan sit amet nulla facilisi. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Et leo duis ut diam quam. Convallis tellus id interdum velit. Pretium fusce id velit ut tortor. Aliquam malesuada bibendum arcu vitae elementum curabitur. Elementum integer enim neque volutpat ac tincidunt vitae. Nulla porttitor massa id neque aliquam. Quisque id diam vel quam elementum pulvinar. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi.</section>
<section id="section-4">
<h3>SEC 4</h3>
Tortor pretium viverra suspendisse potenti. Iaculis eu non diam phasellus. Nulla pharetra diam sit amet nisl. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Cras adipiscing enim eu turpis egestas pretium. Tellus mauris a diam maecenas sed enim ut sem. Amet est placerat in egestas. Volutpat lacus laoreet non curabitur. Eget nullam non nisi est sit amet. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Massa massa ultricies mi quis. Volutpat sed cras ornare arcu. Varius duis at consectetur lorem. Odio euismod lacinia at quis risus.</section>
</main>
<footer>Footer here</footer>
<script>
let mainNavLinks = document.querySelectorAll("nav ul li a");
let mainSections = document.querySelectorAll("main section");
let lastId;
let cur = [];
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
</script>
</body>
</html>Tore Brandtzæg 的解决方案(谢谢!但是“Currently at SEC-”功能丢失了)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>TEST</title>
<style type="text/css">
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
}
header {
padding: 1em;
}
nav {
position: sticky;
top: 0;
color: #000;
background-color: yellow;
border-bottom: 2px solid yellow;
}
nav ul {
list-style: none;
margin: 0;
padding: 1em 1em 1em 0;
}
nav ul li {
display: inline;
}
nav ul li a {
display: inline;
color: #000;
text-decoration: none;
padding: 1em;
}
nav ul li a.current {
border-bottom: 2px solid blue;
}
main {
}
section {
padding: 5em 1em 1em 1em;
}
footer {
background-color: #000;
color: #fff;
margin-top: 5em;
padding: 1em;
}
</style>
</head>
<body>
<header> Header here </header>
<nav>
<ul>
<li><a href="#section-1">SEC 1</a></li>
<li><a href="#section-2">SEC 2</a></li>
<li><a href="#section-3">SEC 3</a></li>
<li><a href="#section-4">SEC 4</a></li>
</ul>
</nav>
<main>
<section id="section-1">
<h3>SEC 1</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum sit amet justo donec enim diam vulputate ut pharetra. Et ultrices neque ornare aenean. Vulputate mi sit amet mauris commodo. Pulvinar mattis nunc sed blandit. Aliquam ut porttitor leo a diam sollicitudin tempor. Dolor purus non enim praesent elementum facilisis leo. Consequat semper viverra nam libero justo laoreet sit amet. Ornare suspendisse sed nisi lacus. Sed viverra tellus in hac habitasse. Malesuada fames ac turpis egestas maecenas pharetra convallis. Sed adipiscing diam donec adipiscing tristique risus. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Pretium aenean pharetra magna ac placerat. Tellus integer feugiat scelerisque varius.</section>
<section id="section-2">
<h3>SEC 2</h3>
Duis tristique sollicitudin nibh sit amet. Facilisis leo vel fringilla est. Erat nam at lectus urna. Ut sem viverra aliquet eget sit amet tellus. Vulputate sapien nec sagittis aliquam. Tortor condimentum lacinia quis vel. Eget magna fermentum iaculis eu. In tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Sollicitudin tempor id eu nisl nunc. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Velit laoreet id donec ultrices tincidunt. Facilisi nullam vehicula ipsum a arcu. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Vitae purus faucibus ornare suspendisse sed nisi lacus. A arcu cursus vitae congue mauris rhoncus aenean.</section>
<section id="section-3">
<h3>SEC 3</h3>
Aliquam sem et tortor consequat. Faucibus in ornare quam viverra orci sagittis eu volutpat odio. Vel eros donec ac odio tempor orci dapibus ultrices. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. At auctor urna nunc id cursus metus aliquam eleifend. Consequat mauris nunc congue nisi vitae. In massa tempor nec feugiat nisl pretium fusce. At imperdiet dui accumsan sit amet nulla facilisi. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Et leo duis ut diam quam. Convallis tellus id interdum velit. Pretium fusce id velit ut tortor. Aliquam malesuada bibendum arcu vitae elementum curabitur. Elementum integer enim neque volutpat ac tincidunt vitae. Nulla porttitor massa id neque aliquam. Quisque id diam vel quam elementum pulvinar. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi.</section>
<section id="section-4">
<h3>SEC 4</h3>
Mauris rhoncus aenean vel elit scelerisque. Auctor elit sed vulputate mi sit amet mauris commodo quis. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. In fermentum posuere urna nec tincidunt. Condimentum lacinia quis vel eros donec ac. Mattis rhoncus urna neque viverra justo. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa. In pellentesque massa placerat duis ultricies. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. Ipsum dolor sit amet consectetur adipiscing elit duis. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Ut porttitor leo a diam sollicitudin. Ut etiam sit amet nisl purus in mollis nunc sed. Habitant morbi tristique senectus et netus. Laoreet sit amet cursus sit amet dictum sit amet. Natoque penatibus et magnis dis parturient montes nascetur. Nulla pellentesque dignissim enim sit amet venenatis urna.<br>
Cras semper auctor neque vitae tempus quam pellentesque nec nam. Sodales ut etiam sit amet nisl. Ut consequat semper viverra nam libero justo laoreet sit. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Ipsum dolor sit amet consectetur adipiscing elit duis. Nunc congue nisi vitae suscipit tellus mauris. Adipiscing bibendum est ultricies integer quis auctor elit sed vulputate. Neque ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Commodo odio aenean sed adipiscing diam. Nisi lacus sed viverra tellus in hac habitasse. Arcu cursus vitae congue mauris rhoncus aenean. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Proin sed libero enim sed faucibus. Libero volutpat sed cras ornare. Ornare arcu odio ut sem nulla pharetra diam sit. Praesent tristique magna sit amet.<br>
Porta non pulvinar neque laoreet suspendisse interdum consectetur. Cras fermentum odio eu feugiat pretium nibh. Purus gravida quis blandit turpis cursus. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Ut placerat orci nulla pellentesque dignissim enim sit amet. Leo duis ut diam quam nulla porttitor massa id neque. Dignissim convallis aenean et tortor at. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Sit amet porttitor eget dolor morbi non arcu risus. Mi sit amet mauris commodo.</section>
</main>
<footer>Footer here</footer>
<script>
let mainNavLinks = document.querySelectorAll("nav ul li a");
let clickEventListener = event => {
mainNavLinks.forEach(link => link.classList.remove("current"));
event.target.classList.add("current");
};
mainNavLinks.forEach(link => link.addEventListener('click', clickEventListener));
</script>
</body>
</html>最佳答案
不确定这是否符合您的要求，但另一种解决方案是为每个导航链接添加一个点击事件监听器，它会取消选择所有其他导航链接并选择被点击的链接。
这可以通过将脚本部分替换为如下内容来完成:
let mainNavLinks = document.querySelectorAll("nav ul li a");
let clickEventListener = event => {
mainNavLinks.forEach(link => link.classList.remove("current"));
event.target.classList.add("current");
};
mainNavLinks.forEach(link => link.addEventListener('click', clickEventListener));
至少对我来说，这似乎解决了单击链接时出现的问题。
编辑:刚刚意识到您可能还需要滚动功能，但此解决方案不包括此功能。
关于javascript - 尝试制作一个导航栏，但出了点问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59601222/