javascript - 导航栏仅在第一次单击时有效,第二次无效
问题描述
我设计了一个带有 html 和 css 的页面,并放置了一个导航栏,当我点击一个导航栏项目时,我在互联网上找到了它,它完美地工作,它滚动到另一个部分,但是当我再次点击返回或转到另一部分它不起作用!
我不知道 jquery,但是如果链接有效,我可以添加另一个 js 吗?
这是HTML
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#myVideo"><img src="img/acp logodarker.png"></img></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.html#myVideo">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.html#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.html#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://ws.onehub.com/workspaces/1188704/signin">INVESTOR LOGIN</a>
</li>
</ul>
</div>
</div>
</nav>
jQuery
/*!
* Start Bootstrap - Agency v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/agency)
* Copyright 2013-2018 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-agency/blob/master/LICENSE)
*/
!function(a){"use strict";a('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var o=a(this.hash);if((o=o.length?o:a("[name="+this.hash.slice(1)+"]")).length)return a("html, body").animate({scrollTop:o.offset().top-54},1e3,"easeInOutExpo"),!1}}),a(".js-scroll-trigger").click(function(){a(".navbar-collapse").collapse("hide")}),a("body").scrollspy({target:"#mainNav",offset:54});var o=function(){a("#mainNav").offset().top>100?a("#mainNav").addClass("navbar-shrink"):a("#mainNav").removeClass("navbar-shrink")};o(),a(window).scroll(o),a(".portfolio-modal").on("show.bs.modal",function(o){a(".navbar").addClass("d-none")}),a(".portfolio-modal").on("hidden.bs.modal",function(o){a(".navbar").removeClass("d-none")})}(jQuery);
css
#mainNav {
background-color: white; }
#mainNav .navbar-toggler {
font-size: 12px;
right: 0;
padding: 13px;
text-transform: uppercase;
color: white;
border: 0;
background-color: #293246;
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, sans-serif; }
#mainNav .navbar-brand {
color: #EC9C3F;
font-family: 'Kaushan Script', 'Helvetica Neue', Helvetica, cursive; }
#mainNav .navbar-brand.active, #mainNav .navbar-brand:active, #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
color: #EC9C3F; }
#mainNav .navbar-nav .nav-item .nav-link {
font-size: 90%;
font-weight: 400;
padding: 0.75em 0;
letter-spacing: 1px;
color: #293246;
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, sans-serif; }
#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
/* Active navbar */
color: #000; }
#mainNav img {
height: 52px;
width: auto; }
@media (min-width: 992px) {
#mainNav {
padding-top: 25px;
padding-bottom: 25px;
-webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
-moz-transition: padding-top 0.3s, padding-bottom 0.3s;
transition: padding-top 0.3s, padding-bottom 0.3s;
border: none;
background-color: transparent;
background-color: rgba(248, 249, 250, 0.5); }
#mainNav .navbar-brand {
font-size: 1.75em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s; }
#mainNav .navbar-nav .nav-item .nav-link {
padding: 1.1em 1em !important; }
#mainNav.navbar-shrink {
color: white;
padding-top: 0;
padding-bottom: 0;
background-color: #293246; }
#mainNav.navbar-shrink .navbar-brand {
font-size: 1.25em;
padding: 12px 0; }
#mainNav.navbar-shrink .nav-item .nav-link {
color: white; }
#mainNav.navbar-shrink .nav-item .nav-link.active, #mainNav.navbar-shrink .nav-item .nav-link:hover {
color: #EC9C3F;
background-color: #293246; } }
解决方案
这是jqyery
! function(a) {
"use strict";
a('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
var o = a(this.hash);
if ((o = o.length ? o : a("[name=" + this.hash.slice(1) + "]")).length) return a("html, body").animate({
scrollTop: o.offset().top - 54
}, 1e3, "easeInOutExpo"), !1
}
}), a(".js-scroll-trigger").click(function() {
a(".navbar-collapse").collapse("hide")
}), a("body").scrollspy({
target: "#mainNav",
offset: 54
});
var o = function() {
a("#mainNav").offset().top > 100 ? a("#mainNav").addClass("navbar-shrink") : a("#mainNav").removeClass("navbar-shrink")
};
o(), a(window).scroll(o), a(".portfolio-modal").on("show.bs.modal", function(o) {
a(".navbar").addClass("d-none")
}), a(".portfolio-modal").on("hidden.bs.modal", function(o) {
a(".navbar").removeClass("d-none")
})
}(jQuery);
推荐阅读
- database - 使用 Postgres 向表添加约束
- javascript - 如何处理 Angular 和 Spring boot 之间的时区
- javascript - 如何在客户端 Express 应用程序中处理 jwt 令牌和 refreshtoken?
- asp.net-core - 使用 [ValidateAntiForgeryToken] 时,ASP.NET Core 5 API 是否需要 __RequestVerificationToken xor RequestVerificationToken 标头?
- r - 我如何制作一个函数/循环来生成多个数据帧
- pentaho - Pentaho 中的 Zip 文件夹
- javascript - 找不到变量样式表 - React Native
- excel - 将粘贴数据复制到第一个空行 VBA
- java - STDERR 将每个堆栈跟踪行写入 WildFly server.log 中的错误日志条目
- php - PHP GD 在另一个形状上绘制形状并使其透明