Question

我正在使用免费模板制作网站，但我不太了解JS。因此，我进行了研究，发现JS导致了问题。

这是相关的HTML和JS代码：

var clickMenu = function() {

  $('#navbar a:not([class="external"])').click(function(event) {
    var section = $(this).data('nav-section'),
      navbar = $('#navbar');

    if ($('[data-section="' + section + '"]').length) {
      $('html, body').animate({
        scrollTop: $('[data-section="' + section + '"]').offset().top - 55
      }, 500);
    }

    if (navbar.is(':visible')) {
      navbar.removeClass('in');
      navbar.attr('aria-expanded', 'false');
      $('.js-fh5co-nav-toggle').removeClass('active');
    }

    event.preventDefault();
    return false;
  });


};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <!-- Mobile Toggle Menu Button -->
      <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><i></i></a>
      <a class="navbar-brand" href="index.html"><span>X</span>XXX XXXX</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="index.html" data-nav-section="home"><span>Home</span></a></li>
        <li><a href="#" data-nav-section="about"><span>About</span></a></li>
        <li><a href="#" data-nav-section="services"><span>Services</span></a></li>
        <li><a href="#" data-nav-section="contact"><span>Contact</span></a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

在函数的底部，return false;语句在每个链接上触发；不管是页面内锚还是链接到另一个页面。这样可以防止浏览器跳转到其他页面。

我已经更改了您（相关的）代码，并发布了一些新的jQuery（带有注释）：

目标已从data-nav-section中移除，并直接放置到href中。这样可以减少一些多余的代码，并且可以使这些代码在没有脚本支持的浏览器中运行。他们不会跳动，而是会跳动。但是-由于使用了JS来停止浏览器的功能-具有脚本支持的浏览器将可以正常运行。

我使用rel="external"而不是'class =“ external” , because class is only useful to CSS; rel`可以很容易地被CSS使用，但是也可以由自动化系统解释（例如漫游器和搜索引擎）。

我也将class="active"替换为aria-current="page"。同样，CSS可以同时很好地工作，但是aria-current=""可以用于可访问的系统（例如屏幕阅读器）。

注意：：我不确定if (navbar.is(':visible')) {...代码块的用途，因此我暂时不在示例中。

$('document').ready(() => {

  $('#navbar a:not([rel="external"])').on('click', function(event) {
    // Assign target element to the variable targetElement.
    let targetElement = $("#" + $(this).attr('href').split('#')[1]);

    // If the target element exists, it will have a length. If it doesn't exist, the browser will do its own thing.
    if (targetElement.length) {
      // Scroll browser window to the top of the element (-55px)
      $('html, body').animate({
        scrollTop: targetElement.offset().top - 55
      }, 500);
      // End funtion processing, and prevent the browser from performing any more actions.
      return false;
    }
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <!-- Mobile Toggle Menu Button -->
      <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><i></i></a>
      <a class="navbar-brand" href="index.html"><span>X</span>XXX XXXX</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li aria-current="page"><a href="index.html"><span>Home</span></a></li>
        <li><a href="#about"><span>About</span></a></li>
        <li><a href="#services"><span>Services</span></a></li>
        <li><a href="#contact"><span>Contact</span></a></li>
      </ul>
    </div>

    <div id="about" style="height: 200px; width=900px; background-color: #0F0;">
      <h2>About</h2>
    </div>
    <div id="services" style="height: 200px; width=900px; background-color: #00F;">
      <h2>Services</h2>
    </div>
    <div id="contact" style="height: 200px; width=900px; background-color: #F00;">
      <h2>Contact</h2>
    </div>
  </div>
</nav>

JS导致导航栏列表元素中的链接不起作用，我该如何解决？

1 个答案: