[英]How do I access these id's with javaScript
我有一个带有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";
因为它更简单。
你的jQuery选择器:
$("nav ul li a")
将搜索元素<nav>
(不存在)。
相反,您可以使用选择器:
$(".nav a")
我想我会做一个更有用的全局函数。 我会检查任何带有锚引用的href,检查是否有一个带有该id的div,然后滚动到那个。
这样你不仅限于菜单,而且可以在任何地方使用相同的代码。 此外,我将事件caputurer作为顶级文档,因此您可以在心脏内容中插入和删除元素,它将始终工作而不必反弹。
$(document).on('click','a[href^="#"]',function(e) { var target = $(e.currentTarget).attr('href'); var $target = $(target); if($target.length > 0) { $("html body").animate({ scrollTop: $target.offset().top }, 1000); } });
div.sect { margin:50px; height:400px; width:100%; background-color:gray; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li><a id="blah" href="www.google.nl">Excluded</a></li> <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> <li><a id="blah" href="www.google.nl">Excluded</a></li> <div class="sect" id="portfolioSect"> portfolioSect </div> <div class="sect" id="homeSect"> homeSect </div> <div class="sect" id="aboutSect"> aboutSect </div> <div class="sect" id="contactSect"> contactSect </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.