javascript - 导航栏的链接不转到区域 ID

Question

应用 Codrops 样式后在导航栏中，我无法使链接转到单个页面中的区域 ID。

如果我按“客户”(例如)，链接不会转到 id 客户区域。

我需要帮助来确定问题的根源。

这是我的 HTML:

<nav class="menu menu--ferdinand">
  <ul class="menu__list">
    <li class="menu__item">
      <a class="menu__link" href="#Services">Services</a>
    </li>
    <li class="menu__item">
      <a class="menu__link" href="#Clients">Clients</a>
    </li>
    <li class="menu__item">
      <a class="menu__link" href="#Us">About Us</a>
    </li>
    <li class="menu__item menu__item--current">
      <a class="menu__link" href="#Contact">Contact</a>
    </li>
  </ul>
</nav>

脚本位于我的index.html底部(我的js文件夹中有classie.js、clipboard.min.js)

<script src="js/classie.js"></script>
<script src="js/clipboard.min.js"></script>
<script>
    (function() {
      [].slice.call(document.querySelectorAll('.menu')).forEach(function(menu) {
        var menuItems = menu.querySelectorAll('.menu__link'),
        setCurrent = function(ev) {
        ev.preventDefault();

        var item = ev.target.parentNode; // li

        // return if already current
        if (classie.has(item, 'menu__item--current')) {
          return false;
        }
        // remove current
        classie.remove(menu.querySelector('.menu__item--current'), 'menu__item--current');
        // set current
        classie.add(item, 'menu__item--current');
      };

    [].slice.call(menuItems).forEach(function(el) {
      el.addEventListener('click', setCurrent);
    });
  });

  [].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link) {
    link.setAttribute('data-clipboard-text', location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id);
    new Clipboard(link);
    link.addEventListener('click', function() {
      classie.add(link, 'link-copy--animate');
      setTimeout(function() {
        classie.remove(link, 'link-copy--animate');
      }, 300);
    });
  });
})(window);
</script>

区域(示例):

<section id="Clients" class="Clients">
</section>
<section id="Services" class="Services">
</section>

Answer 1

ev.preventDefault() 阻止链接执行默认操作(即跟随链接进入新页面或书签)。