我正在使用scrollspy导航栏,以便导航栏自动切换到用户所在的任何部分;这很好。虽然如果我点击一个部分例如“联系”,然后我将一个部分向上滚动到“项目”,然后项目在narbar上变为活动状态,但联系部分也保持活动状态,即当我滚动离开时,它仍然是粗体。
从上图可以看到,滚动后,“联系人”导航仍处于活动状态。每当我单击导航键后,它都会保持活动状态。
有人可以看到原因吗?
HTML:
<nav class="navbar navbar-expand-lg navbar-dark bg-primary testnav fixed-top" id="mainNav">
<div class="container">
<a href="#ptop" class="navbar-brand js-scroll-trigger">CW Portfolio</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#skills">Skills</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#education">Education</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#projects">Projects</a> </li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#interests">Interests</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
</ul>
<!--Search bar-->
<form class="form-inline ml-auto">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" style="height: 37px; border-radius: 10px;">
<button class="btn btn-light " type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
<section id="projects" style="background-color:whitesmoke;">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 style="text-align: center;"> Projects </h2>
<br>
<br>
<br>
text
</div>
</div>
</div>
</section>
<section id="interests" style="background-color:whitesmoke;">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 style="text-align: center;"> Interests & Achievements </h2>
<br>
<br>
<br>
text
</div>
</div>
</div>
</section>
<section id="contact">
<div class="container">
<h2 style="text-align: center;"> Contact Me </h2>
<br>
<br>
<br>
<div class="row ">
<div class="col-lg-4 ">
<div class="text-center p-4 shadow">
<div class="contact-icons">
<i class="fas fa-home"></i>
<br>
</div>
<div>
<br>
<h4>Address</h4>
<br>
<p>xxx</p>
</div>
<br>
</div>
<br>
</div>
<br>
<div class="col-lg-4 ">
<div class="text-center p-4 shadow">
<div class="contact-icons">
<i class="fas fa-phone-square-alt"></i>
<br>
</div>
<div>
<br>
<h4>xxx</h4>
<br>
<p>xxx</p>
<br>
</div>
<br>
</div>
<br>
</div>
<br>
<div class="col-lg-4 ">
<div class="text-center p-4 shadow">
<div class="contact-icons">
<i class="fas fa-envelope"></i>
<br>
</div>
<div>
<br>
<h4>Email</h4>
<br>
<p>
<a href="mailto:name@email.com">
xxx
</a>
</p>
<br>
</div>
<br>
</div>
<br>
</div>
<br>
</div>
<div class="row d-flex">
<div class="col-md-5" style="float: none; margin: 0 auto; margin-top: 50px;">
<form action="#" class="bg-light p-4 p-md-5 contact-form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Email">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Subject">
</div>
<div class="form-group">
<textarea name="" id="" cols="30" rows="7" class="form-control" placeholder="Message"></textarea>
</div>
<div class="form-group">
<input type="submit" value="Send Message" class="btn btn-primary py-3 px-5">
</div>
</form>
</div>
<div class="col-md-7 d-felx">
<div id="map" style="height: 550px; width: 100%; margin-top:50px; "></div>
</div>
</div>
</div>
</section>
CSS:
.testnav a {
font-weight: bold;
}
.testnav a:hover {}
.testnav a.active {
text-decoration: underline;
}
section {
padding: 150px 0;
}
header {
padding: 156px 0 100px;
}
.it-icons a {
display: inline-block;
height: 3.5rem;
width: 3.5rem;
background-color: #4582EC;
color: #fff !important;
border-radius: 100%;
text-align: center;
font-size: 1.3rem;
line-height: 3.5rem;
margin-right: 1rem;
}
.it-icons a:hover {
transform: scale(1.2) rotate(20deg);
background-color: skyblue;
}
.tu-icon a:hover {
transform: rotate(5deg);
}
.os-icons a {
display: inline-block;
height: 3.5rem;
width: 3.5rem;
background-color: #4582EC;
color: #fff !important;
border-radius: 100%;
text-align: center;
font-size: 1.5rem;
line-height: 3.5rem;
margin-right: 1rem;
}
.os-icons a:hover {
transform: scale(1.3) rotate(20deg);
background-color: skyblue;
}
.proj-icons li {
display: inline-block;
height: 2.5rem;
width: 2.5rem;
background-color: #4582EC;
color: #fff !important;
border-radius: 100%;
text-align: center;
font-size: 1.0rem;
line-height: 2.5rem;
margin-right: 1rem;
}
.proj-icons a:hover {
transform: scale(1.3) rotate(20deg);
background-color: skyblue;
}
.tabs .nav-tabs>li,
.tabs .nav-pills>li {
float: none;
display: inline-block;
margin-bottom: 10px;
width: 140px;
border: 1px solid #000000;
padding: 5px 5px;
}
.tabs .nav-tabs {
text-align: center;
border-bottom: 0;
margin-bottom: 20px;
}
.tabs .nav-tabs li:not(:last-child) {
margin-right: 10px;
}
.tabs .nav-tabs li a {
text-transform: capitalize;
font-size: 20px;
border-radius: 0;
transition: all .3s ease;
font-weight: 600;
color: #4582EC;
font-family: "Source Sans Pro", sans-serif;
}
.tabs .nav-tabs li a:hover {
text-decoration: underline;
color: #4582EC;
}
.tabs .nav-tabs li a.active {
text-decoration: underline;
color: #4582EC;
}
.service-box {
position: relative;
width: 100%;
}
.service-box .contents {
margin-left: 30px;
}
.tab-content {
position: relative;
float: left;
width: 100%;
z-index: 99;
}
.service-box {
position: relative;
width: 100%;
}
.service-box .section-title h3 {
position: relative;
font-size: 32px;
line-height: 42px;
font-weight: 700;
padding-bottom: 20px;
margin-bottom: 45px;
color: #000;
text-transform: uppercase;
}
.service-box .section-title h3:before {
position: absolute;
left: 0px;
content: '';
bottom: 0px;
background: #333333;
height: 1px;
width: 55px;
}
.progress .progress-bar>span {
position: relative;
height: 100%;
}
.progress .progress-bar>span>* {
position: absolute;
top: 0;
transition: opacity .3s ease-out;
}
.progress .grade {
opacity: 0;
}
.progress:hover .grade {
opacity: 1;
}
.progress:hover .percentage {
opacity: 0;
}
.dev-icons {
font-size: 2.5rem;
}
.dev-icons .list-inline-item i:hover {
color: #4582EC;
transform: scale(1.3);
}
.contact-icons {
color: #4582EC;
font-size: 3.5rem;
}
.footer {
background: #000000;
color: #fff;
}
.footer a {
color: rgb(238, 238, 238);
font-size: medium;
}
scrollspy和smoothscroll的Javascript:
(function($) {
"use strict"; // Start of use strict
//smooth-scrolling
$('a.js-scroll-trigger[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 - 56)
}, 1000, "easeInOutExpo");
return false;
}
}
});
//close responsive menu
$('.js-scroll-trigger').click(function() {
$('.navbar-collapse').collapse('hide');
});
//scrollspy
$('body').scrollspy({
target: '#mainNav',
offset: 56
});
})(jQuery);
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').trigger('focus')
})
答案 0 :(得分:0)
您所附的CSS没有显示任何描述.nav-link
的类。我知道其引导程序相关的问题(建议也提一下)。因此,您的a
类回退到
.testnav a {
font-weight: bold;
}