内部链接返回空错误，我在 Javascript 中找不到错误.外部链接工作得很好

Internal links return null errors and I can't find the mistake in my Javascript. External links work just fine

本文关键字：错误 链接 外部 找不到 工作 很好 我在 返回 内部 Javascript      更新时间：2023-09-26

我建立了一个网站并尝试了一个花哨的导航，我从 http://codepen.io/arjancodes/pen/jErbyM 复制并进行了一些自定义。（谢谢你启发我！

这是我的网站

davidgoossens.com

HTML 和 CSS 工作正常，但内部链接（当您打开右下角的导航时）不断返回 404。我的虚拟主机告诉我错误一定在JS中，即：

 var nav = document.querySelector('.material-menu-wrapper');
 var circle = document.querySelector('.material-btn');
 var link = document.querySelector('.material-content').querySelectorAll('li');
 var ham = document.querySelector('.material-hamburger');
 var main = document.querySelector('.content-fade');

var win = window;
function openMenu(event) {
  nav.classList.toggle('active');
  circle.classList.toggle('active');
  ham.classList.toggle('material-close');
  main.classList.toggle('active');
  for (var i = 0; i < link.length; i++) {
    link[i].classList.toggle('active');
  }
  event.preventDefault();
  event.stopImmediatePropagation();
}
function closeMenu() {
  if (circle.classList.contains('active')) {
    circle.classList.remove('active');
    for (var i = 0; i < link.length; i++) {
      link[i].classList.toggle('active');
    }
    ham.classList.remove('material-close');
    main.classList.remove('active');
    nav.classList.remove('active');
  }
}

circle.addEventListener('click', openMenu, false);
circle.addEventListener('touchstart', openMenu, false);
win.addEventListener('click', closeMenu, false);
win.addEventListener('touchstart', closeMenu, false);`

这是我导航的 HTML

<div class="material-menu-wrapper">
  <div class="material-menu">
    <div class="material-btn">
      <div class="material-hamburger">
        <div class="material-patty"></div>
        <div class="material-patty"></div>
        <div class="material-patty"></div>
      </div>
    </div>
    <div class="material-content">
      <nav>
        <ul>
          <li><a href="http://davidgoossens.com/thesen.html">Thesenpapier</a></li>
          <li><a href="http://davidgoossens.com/motivation.html">Motivation</a></li>
          <li><a href="http://davidgoossens.com/work.html">Arbeitsproben</a></li>
          <li><a href="http://davidgoossens.com/cv.html">CV</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

如果您能帮助我解决这个问题，那就太好了!!

此致敬意

大卫

您的问题出在点击延迟.js：

$(function(){ // DOM READY shorthand
  $('li').click(function (e) {
    e.preventDefault();
    var goTo = this.getAttribute("href");

    //< do something
    //do something > 

     setTimeout(function(){
       window.location = goTo;
    },500);
   }); 
});

此代码中的this是 li 元素，而不是链接。当您尝试获取li的 href 时，它会失败，并且goTo为空。那么你有window.location = null;.您需要获取子元素的href，即锚标记。

相关文章：