On our site we have a menu that contains links whose data-drupal-link-system-path attribute matches. The links point to the same URL but with different anchors. Both are given the is-active class, which results in our CSS putting an "active" indicator on both links.
The is-active class is added by core/misc/active-link.js, which queries the DOM for links with several attributes:
data-drupal-link-query (query string)data-drupal-link-system-path (internal path)hreflang (language code)As you can see, it supports querying the DOM for query strings, language codes, and internal URL codes (e.g., /node/1234). But, it doesn't support anchors. What I found was:
href attributes, but the same data-drupal-link-system-path.core/misc/active-link.js relies on the data-drupal-link-system-path to determine the current page, any anchors present in the current URL or the link URL are ignored.href attributes (because the anchors are different)data-drupal-link-system-path attributeI was able to get this working with only small modifications to core/misc/active-link.js. I'll attach a merge request with the changes to this issue.
Testing and verification. I'd completely understand if there's a better, or more "Drupal" way to do this. If that's the case, I'm happy to make the changes needed.
Active
10.3 ✨
After the last update the patch from the merge request is no longer installing my Drupal 10 sites. I'm attaching a patch for 10.5.x to this reply.
Updated the 10.5.x patch to match changes to the merge request.