【发布时间】：2020-08-03 23:34:06
【问题描述】：
我有代码，主要功能是单击选项卡时。该选项卡将突出显示并移至代码的该部分。 “字符”选项卡有效，“关于”选项卡只是将我带到页面顶部，所以我不确定这是否有效。但是，“联系我们”选项卡和“战斗驱动器”选项卡是完全错误的。联系我们选项卡将我带到战斗驱动器选项卡，而战斗驱动器选项卡将我带到它下方。我想创建一个函数，当按下选项卡时，它会精确到该特定元素/部分。将 id 添加到正在使用它的特定元素而不是仅添加到 div 元素是否更有意义。
const makeNavLinksSmooth = () => {
const navLinks = document.querySelectorAll('.nav-tab'); // add the name of the class you want to highlight when section appears
// this for loop checks all the elemnts which have class '.nav-tab' and adds a click event to it so it can scroll to that section
for (let n in navLinks) {
if (navLinks.hasOwnProperty(n)) {
navLinks[n].addEventListener('click', e => {
e.preventDefault();
document.querySelector(navLinks[n].hash)
.scrollIntoView({
behavior: "smooth"
});
});
}
}
}
const spyScrolling = () => {
const sections = document.querySelectorAll('.panel'); // a common name give to each section to identify them
// on scroll will highligh the nav item when reaches to the specific section
window.onscroll = () => {
const scrollPos = document.documentElement.scrollTop || document.body.scrollTop;
for (let s in sections) {
console.log(scrollPos, sections[s].offsetTop)
if (sections.hasOwnProperty(s) && sections[s].offsetTop <= scrollPos + 100) {
const id = sections[s].id;
document.querySelector('.active').classList.remove('active');
document.querySelector(`a[href*=${ id }]`).parentNode.classList.add('active');
}
}
}
}
makeNavLinksSmooth();
spyScrolling();<body class="scroll-area" data-spy="scroll" data-offset="0">
<header class="section">
<!-- container -->
<div class="">
<div class="col-xs-3">
<img src="images/ShoeJackCityLogo.png" class="img logo">
</div>
<nav id="site-nav">
<ul class="group">
<li><a href="https://twitter.com/_ShoeJackCity">Twitter</a></li>
<li><a class="nav-tab" href="#characters">Characters</a></li>
<li><a class="nav-tab" href="#battle_drives">Battle Drives</a></li>
<li class="active"><a class="nav-tab" href="#about">About</a></li>
<li><a class="nav-tab" href="#follow_us">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
<div class="content-area group section">
<!-- container -->
<div class="container panel" id="about">
<!-- row -->
<div class="Title">
<h1>ShoeJackCity</h1>
<p>SJC is a mobile game where you can buy, sell, and play in a compettive 11v1 fighting tournament against real users to win sneakers.</p>
</div>
<div class="row">
<div class="col col-sm-8 col-lg-8">
<div class="game-play">
<video controls>
<source src="videos/RPReplay_Final1595357560.MP4" type="video/MP4">
</video>
</div>
</div>
<div class="col col-sm-4 col-lg-4">
<h3>About</h3>
<p>Shoe Jack City is a first of its kind mobile gaming resell app that allows players to buy,sell, and compete for rare, high-end sneakers in a tournament style battle royale.</p>
<p>Inspired by the MegaMan Battle Network Series, players can choose thier Anomalies, collect battle drives to unleash powerful attacks and hidden abilities.</p>
<p>Buy and/or sell sneakers, and Dominate your way against friends and compete in 1v1 tournament battle royale to win top tier sneakers and reduce your sellers transaction fee!</p>
</div>
</div>
</div>
<!-- container -->
<div class="container panel" id="follow_us">
<!-- row -->
<h1 class="m-2">Follow us/Contact Us</h1>
<!-- row -->
<div class="row">
<!-- col -->
<div class="col col-sm-8">
<div class="col col-sm-4 col-lg-4">
<!-- box-a -->
<div class="box-twitter">
<p><a href="https://twitter.com/_ShoeJackCity">Twitter</a></p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
<!-- col -->
<div class="col col-sm-4 col-lg-4">
<!-- box-a -->
<div class="box-insta">
<p><a href="https://www.instagram.com/_shoejackcity/?hl=en">Instagram</a></p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
<!-- col -->
<div class="col col-sm-4 col-lg-4">
<!-- box-a -->
<div class="box-facebook">
<p>Facebook</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
</div>
<!-- col -->
<div class="col col-sm-4 col-lg-4">
<!-- box-a -->
<form>
<div class="box-b">
<input id="email" class="email-input" type="email" name="email" placeholder="Email">
</div>
<input type="submit" value="Subscribe" class="subscribe-button">
</form>
</div>
</div>
</div>
<div class="container panel" id="battle_drives">
<!-- row -->
<div class="row">
<!-- col -->
<h2>Battle Drives</h2>
<div class=" push-down-sm">
<!-- row -->
<div class="row">
<!-- col -->
<div class="col col-sm-6 col-lg-3">
<!-- box-a -->
<div class="box-a">
<img src="images/BC_Area_advance.png">
<p>Slices 1 enemy directly Slices 1 enemy directly Slices 1 enemy directly ahead. Range is 2 spaces, 80dmg, 40MB, LVL 1</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
<!-- col -->
<div class="col col-sm-6 col-lg-3">
<!-- box-a -->
<div class="box-a">
<img src="images/BC_Area_advance.png">
<p>AreaAdvance: Steals up to the first 4 available spaces. MB: 200, LV 1</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
<!-- col -->
<div class="col col-sm-6 col-lg-3">
<!-- box-a -->
<div class="box-a">
<img src="images/BC_Area_advance.png">
<p>Mamba Mentality - raise attack power of Level 1 chip x2. MB:50, LV 1</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
<!-- col -->
<div class="col col-sm-6 col-lg-3">
<!-- box-a -->
<div class="box-a">
<img src="images/BC_Area_advance.png">
<p>Mamba Mentality - raise attack power of Level 1 chip x2. MB:50, LV 1</p>
</div>
<!-- /box-a -->
</div>
<!-- /col -->
</div>
<!-- /row -->
<!-- row -->
</div>
<!-- /col -->
</div>
<!-- /row -->
</div>
<!-- /container -->
<!-- container -->
</div>
<div class="container p-2 panel" id="characters">
<div class="row">
<h2 class="">Characters</h2>
<!-- col -->
<div class="col col-xs-6">
<img class="postion" src="images/Marbelle_ingame_concept.png">
</div>
<!-- /col -->
<!-- col -->
<div class="col col-xs-6">
<img class="postion" src="images/Ade_ingame_concept.png">
</div>
<!-- /col -->
</div>
<!-- /row -->
</div>
<footer>
<p>© 2014 - This is the footer.</p>
</footer>
</body>【问题讨论】：
-
我更喜欢 id，因为这样就不需要每次单击时都经过 for 循环。它会更清洁，需要更少的处理。这就是我的想法，我可能是错的:)
-
如果可能，创建一个 sn-p
标签： javascript html scrollview dom-events