Question

我的网站带有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);
    });
}

Answer 1

您应该使用.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";，因为它更简单。

Answer 2

您的jQuery选择器：

$("nav ul li a")

将搜索元素<nav>（不存在）。

相反，您可以使用选择器：

$(".nav a")

Answer 3

我猜我会做一个更有用的全局函数。我会检查任何带有锚引用的href，检查是否有一个带有该id的div，然后滚动到那个。

这样你不仅限于菜单，而且可以在任何地方使用相同的代码。此外，我将事件caputurer设为顶级文档，因此您可以在内容中插入和删除元素，并且无需反弹即可始终工作。

＆＃13;

$(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);
     }
});

＆＃13;

div.sect {
   margin:50px;
  height:400px;
  width:100%;
  background-color:gray;
}

＆＃13;

<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>

＆＃13;

如何使用javaScript访问这些id

3 个答案: