添加 CSS 如果页面 URL 等于 <a> link 在存在#anchor-tags 时页面不起作用

Question

我有以下代码查看页面 URL 是否与页面上某个项目的 "href" 相同，如果是，则添加 CSS class 到标签

  $(document).ready(function($){
      var pgurl = window.location.href;
      $("div.scrollmenu.restyled span").each(function(){
           if($(this).find('a').attr("href") == pgurl || $(this).find('a').attr("href") == '' )
            $(this).addClass("active");
      })
  });

效果很好，但我在某些页面中有锚点，这会阻止它向项目应用 CSS class。

例如 domain.com/page-name/ 添加 CSS class 但 domain.com/page-name/#named-anchor 没有。

我想我需要更改我的代码，以便它查看页面 URL 中是否包含 "href" 标记，而不是完全匹配。

Answer 1

您可以使用 var pgurl = window.location.origin + window.location.pathname .

它将为您提供 URL 不计算哈希 (#) 的页面。

添加 CSS 如果页面 URL 等于 <a> link 在存在#anchor-tags 时页面不起作用

Add CSS if Page URL equals <a> link on page not working when #anchor-tags are present

css

anchor

jquery

window.location