Question

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

如果我按下＆＃34;客户＆＃34; （例如），链接不会转到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()阻止链接执行默认操作（即按照指向新页面或书签的链接）。

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

1 个答案: