嗨，跟進下面的代碼片段，我在這里所做的是一個名為activateLink的函數，我為鏈接提供了 ID，然后單擊鏈接我在 jquery 的幫助下向該特定 li 添加了一個活動類
$(function() {
$('.smothscrollclass a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top - 100
}, 1000);
return false;
}
}
});
});
function activateLink (link,section) {
if(section){
$('html, body').animate({
'scrollTop' : $("#"+section).position().top
},function(){
$( ".active" ).removeClass( "active" )
$("#"+link).addClass("active");
});
}else{
$( ".active" ).removeClass( "active" )
$("#"+link).addClass("active")
}
}
function checkSectionExistance (sectionId,linkId) {
var element = document.querySelector('#'+sectionId);
var position = element.getBoundingClientRect();
// checking for partial visibility
if(position.top < window.innerHeight && position.bottom >= 0) {
$( ".active" ).removeClass( "active" )
$("#"+linkId).addClass("active")
}
}
window.addEventListener('scroll', function() {
checkSectionExistance('aboutus','about-link')
checkSectionExistance('service','service-link')
checkSectionExistance('gallery','gallery-link')
checkSectionExistance('contactus','contact-link')
});
body {
margin: 0;
padding: 0;
}
.headerMenu {
position: fixed;
top: 0;
width: 100%;
background-color: #d9a6a6;
}
.anchorLinks ul {
list-style: none;
}
.anchorLinks ul li {
display: inline-block;
margin: 15px;
}
.anchorLinks ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
.anchorLinks ul li.active a {
color: #ffef00;
border-bottom: 1px solid #000;
}
.WrapperInner {
margin-top: 80px;
margin-bottom: 80px;
}
section {
height: 400px;
padding: 40px;
}
section p {
color: #fff;
}
.aboutus {
background-color: #ec7063;
}
.service {
background-color: #a569bd;
}
.gallery {
background-color: #5dade2;
}
.contactus {
background-color: #2ecc71;
}
a{
cursor:pointer
}
.active {
border-bottom:1px solid white
}
<div class="Wrapper">
<div class="mainInner bg_white">
<div class="linkWrappers">
<header class="headerMenu">
<div class="anchorLinks smothscrollclass">
<ul>
<li><a id='home-link' onclick="activateLink('home-link')">Home</a></li>
<li><a id='about-link' onclick="activateLink('about-link','aboutus')" >About</a></li>
<li><a id='service-link' onclick="activateLink('service-link','service')" >Service</a></li>
<li><a id='gallery-link' onclick="activateLink('gallery-link','gallery')" >Gallery</a></li>
<li><a id='contact-link' onclick="activateLink('contact-link','contactus')" >Contact</a></li>
</ul>
</div>
</header>
</div>
<div class="WrapperInner ">
<section class="aboutus" id="aboutus">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="service" id="service">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="gallery" id="gallery">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="contactus" id="contactus">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
