Javascript 链接到锚点的href#抛出jquery错误

从我的网站的主导航链接到我的网站时，我遇到以下错误：

`Uncaught Error: jquery-1.9.1.min.js:4 Uncaught Error: Syntax error, 
unrecognized expression: ../index.php#home
at Function.st.error (jquery-1.9.1.min.js:4)
at ft (jquery-1.9.1.min.js:4)
at wt (jquery-1.9.1.min.js:4)
at Function.st [as find] (jquery-1.9.1.min.js:4)
at init.find (jquery-1.9.1.min.js:4)
at new init (jquery-1.9.1.min.js:3)
at b (jquery-1.9.1.min.js:3)
at HTMLAnchorElement.<anonymous> (main.js:201)
at Function.each (jquery-1.9.1.min.js:3)
at init.each (jquery-1.9.1.min.js:3)`

`Uncaught Error:jquery-1.9.1.min.js:4 Uncaught Error:Syntax Error，
无法识别的表达式：../index.php#home
at Function.st.error（jquery-1.9.1.min.js:4）
at ft（jquery-1.9.1.min.js:4）
at wt（jquery-1.9.1.min.js:4）
在Function.st[as find]（jquery-1.9.1.min.js:4）
在init.find上（jquery-1.9.1.min.js:4）
在新的初始化时（jquery-1.9.1.min.js:3）
在b（jquery-1.9.1.min.js:3）
在兰开夏。

这些链接工作正常，并跳转到页面之间的不同部分，但JavaScript错误困扰着我

---

我仍然是JavaScript和jQuery的新手，但我正在努力学习并精通它。我只是还没到那里。我猜这是因为链接中有“#”，而jQuery不喜欢它，但是如果您想知道是什么导致了它以及如何修复它，我将不胜感激。

当我快速单击导航时，我在控制台中看到以下错误：

Uncaught ReferenceError: $target is not defined
    at HTMLAnchorElement.<anonymous> (main.js:31)
    at HTMLAnchorElement.dispatch (jquery-1.9.1.min.js:3)
    at HTMLAnchorElement.v.handle (jquery-1.9.1.min.js:3)

在您的例子中，您似乎没有声明变量

$target

。只需在

$target

前面放置一个

var

，如：

var $target = $(target);

你的功能应该很好

顺便说一下，有一种很好的调试方法。只需添加一个

调试器-表达式靠近错误发生的位置，您将看到深入的调试信息。比如：



补充：

如果您检查了其他错误，您有：

Uncaught Error: jquery-1.9.1.min.js:4 Uncaught Error: Syntax error, 
unrecognized expression: ../index.php#home
at Function.st.error (jquery-1.9.1.min.js:4)
at ft (jquery-1.9.1.min.js:4)
at wt (jquery-1.9.1.min.js:4)
at Function.st [as find] (jquery-1.9.1.min.js:4)
at init.find (jquery-1.9.1.min.js:4)
at new init (jquery-1.9.1.min.js:3)
at b (jquery-1.9.1.min.js:3)
at HTMLAnchorElement.<anonymous> (main.js:201)
at Function.each (jquery-1.9.1.min.js:3)
at init.each (jquery-1.9.1.min.js:3)

在这里，我们可以检查
currentLink.attr（“href”）
中的内容（从错误消息中）-../index.php#home-因此您正试图使用以下选择器创建一个元素：
$（'../index.php#home'）
相反，我猜您正试图执行
$（'.#home'）
-如果是这样，只需像这样更新您的代码片段：

  //nav-active
  function onScroll(event){
    var scrollPosition = $(document).scrollTop();
    $('.menu-list a').each(function () {
      var currentLink = $(this);
      var linkHref = currentLink.attr("href"); // extract the href attribute from link
      var anchor = linkHref.split("#").pop(); // split by # and take the last part
      var refElement = $("#" + anchor); // use the anchor extract to use it as id selector

      // add refElement.length check - to just continue if the element actually exist
      if (refElement.length && refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
        $('.menu-list a').removeClass("active");
        currentLink.addClass("active");
      }
      else{
        currentLink.removeClass("active");
      }
    });
  }

//导航激活
函数onScroll（事件）{
var scrollPosition=$（document.scrollTop（）；
$（'.menu list a'）。每个（函数（）{
var currentLink=$（此）；
var linkHref=currentLink.attr（“href”）；//从链接中提取href属性
var anchor=linkHref.split（“#”）.pop（）；//按#拆分并获取最后一部分
var refElement=$（“#”+锚定）；//使用锚定提取将其用作id选择器
//添加refElement.length check-如果元素实际存在，则仅继续
if（refElement.length&&refElement.position（）.top滚动位置）{
$（'.menu list a'）.removeClass（“活动”）；
currentLink.addClass（“活动”）；
}
否则{
currentLink.removeClass（“活动”）；
}
});
}

您的jquery库似乎未加载，您正在尝试使用
在加载库之前先将其删除

尝试在head元素中包含，如下所示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


哪些jQuery语句抛出错误？然而，正如你的问题一样，这个问题是离题的，因为它本身没有提供足够的信息来表达问题所在。@Saifulrahman非常抱歉，我是新来的，这是我的第一篇帖子。我更新了它以包含JS错误。谢谢我添加了var，这似乎解决了$target的问题。我将继续使用调试器表达式，谢谢。我仍然收到“未捕获的错误消息”。我修改了我原来的帖子，加入了我得到的JS错误。我的jquery被缩小了。这是否意味着除了从我的HREF中删除锚ID之外，真的没有办法解决这个问题？@Jason我已经更新了答案，并为您的问题添加了解释和可能的解决方案
  //nav-active
  function onScroll(event){
    var scrollPosition = $(document).scrollTop();
    $('.menu-list a').each(function () {
      var currentLink = $(this);
      var refElement = $(currentLink.attr("href")); # this is line 201
      if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
        $('.menu-list a').removeClass("active");
        currentLink.addClass("active");
      }
      else{
        currentLink.removeClass("active");
      }
    });
  }

var refElement = $(currentLink.attr("href"));

  //nav-active
  function onScroll(event){
    var scrollPosition = $(document).scrollTop();
    $('.menu-list a').each(function () {
      var currentLink = $(this);
      var linkHref = currentLink.attr("href"); // extract the href attribute from link
      var anchor = linkHref.split("#").pop(); // split by # and take the last part
      var refElement = $("#" + anchor); // use the anchor extract to use it as id selector

      // add refElement.length check - to just continue if the element actually exist
      if (refElement.length && refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
        $('.menu-list a').removeClass("active");
        currentLink.addClass("active");
      }
      else{
        currentLink.removeClass("active");
      }
    });
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>