我有一个带有 javaScript 函数的网站,当用户单击导航项时,该函数应滚动到页面上的部分。该脚本在我更改导航菜单之前起作用。我不知道如何在 javaScript 中正确引用 ID。
这是 HTML 导航菜单:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Data Detective</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a id="home" href="#homeSect">HOME</a></li>
<li><a id="about" href="#aboutSect">ABOUT</a></li>
<li><a id="portfolio" href="#portfolioSect">PORTFOLIO</a></li>
<li><a id="contact" href="#contactSect">CONTACT</a></li>
</ul>
</div>
</div>
</div>
这是javaScript:
$(document).ready(function() {
setBindings();
});
//Allow screen to Scroll to selected section
function setBindings() {
$("nav ul li a").click(function (tip) {
tip.preventDefault();
var sectionID = "#" + tip.currentTarget.id + "Sect";
alert('button id ' + sectionID);
$("html body").animate({
scrollTop: $(sectionID).offset().top
}, 1000);
});
}
最佳答案
你应该使用 .navbar
类。
请更改:
$("nav ul li a").click(function (tip) {
至
$(".navbar ul li a").click(function (tip) {
此外,我建议您使用 var sectionID = $(this).attr('href');
而不是 var sectionID = "#"+ tip.currentTarget.id + "Sect";
因为它更简单。
关于javascript - 如何使用 javaScript 访问这些 id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41237625/