V
V
Vladimir Korotenko2021-03-26 15:30:47
SharePoint
Vladimir Korotenko, 2021-03-26 15:30:47

Sharepoint right menu highlighting in pages with hashes?

How to highlight links in the navigation block to pages with anchors?
Actually there was such a need.
Pages like:
page.aspx
page.aspx?#linkone
page.aspx?#linktwo

Expected Behavior: When a page is selected in the navigation bar, the item is highlighted
Actual Behavior: When any link is selected, the last anchor link is highlighted.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Vladimir Korotenko, 2021-03-26
@firedragon

I asked myself and I will answer.
This code is added via code insertion. It then brings the navigation to the expected behavior.
However, it is possible to add it to MasterPage

<script>
    function cleanUpMenu() {
      let nodes = document.querySelectorAll("li.selected");
      if (nodes.length > 0) {
        for (let i = 0; i < nodes.length; i++) {
          nodes[i].classList.remove("selected");
          var hrefs = nodes[i].getElementsByTagName("a");
          var href = hrefs[0];
          href.classList.remove("selected");
        }
      }
    }

    function selectByUrl(url) {
      let mi = document.querySelectorAll("a.ms-core-listMenu-item");
      for (let i = 0; i < mi.length; i++) {
        let item = mi[i];
        var href = item.getAttribute("href");
        if (url.endsWith(href)) {
          item.classList.add("selected");
          item.parentElement.classList.add("selected");
        }
      }
    }
    setInterval(() => {
      cleanUpMenu();
      selectByUrl(window.location.href);
    }, 1000);
  </script>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question