How to add an active class to navigation button based off of URL

Question

I'm working with MadCap Flare, and our team currently has four websites that we are supporting. We want to be able to link these different websites together, so we've added a navigation bar that links to each separate website. The navigation bar works as intended, but we have to assign the Active tag to the correct website link in each project. We're trying to avoid these kinds solutions because manually configuring settings in each project is not our preferred way of working.

We're looking for a way to automatically detect the URL and assign an Active tag based on the URL. This doesn't seem too difficult, and I've found a lot of similar questions and solutions, but I can't seem to figure out how to do this with our current setup. Our team does not consist of coders/programmers, so we could just be missing a very easy solution.

One major challenge is the fact that the hard links, such as https://example.com/Site1/Default.htm , are default links that redirect to the site's homepage, such as https://example.com/Site1/Home.htm , so I can't even do a simple comparison between the current page and the link. Many of the solutions I've found so far seem to break down at this point.

Here's our relevant code:

HTML

<div class="my-header">
      <ul class="XLink">
        <li class="XLink"><a href="https://example.com/Site1/Default.htm">Site 1</a>
        </li>
        <li class="XLink"><a href="https://example.com/Site2/Default.htm">Site 2</a>
        </li>
        <li class="XLink"><a href="https://example.com/Site3/Default.htm">Site 3</a>
        </li>
        <li class="XLink"><a href="https://example.com/Site4/Default.htm">Site 4</a>
        </li>
      </ul>
    </div>

CSS

ul.XLink
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    width: 100%;
}

li.XLink
{
    float: left;
}

li.XLink a
{
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li.active
{
    background-color: #1c5a97;
}

/* Change the link color to #111 (black) on hover */

li.XLink a:hover
{
    background-color: #111;
}

div.my-header
{
    background-color: #103d78;
    margin-bottom: 15px;
    width: 75%;

I've tried a handful of Javascript that I've found online, but nothing has achieved what I was attempting. I've tried adding IDs to the line items, but I'm just too unfamiliar with Javascript to even know what I'm doing. Does anyone have some advice?

Answer 1

You could start by establishing some conventions.

1. All your "links" to said websites have a classname called "XLink", which I see you're already doing.
2. Each of these "links" has id=uniqueID of the associated website.

<div class="my-header">
      <ul class="XLink">
        <li class="XLink" id="Site1"><a href="https://example.com/Site1/Default.htm">Site 1</a>
        </li>
        <li class="XLink" id="Site2"><a href="https://example.com/Site2/Default.htm">Site 2</a>
        </li>
        <li class="XLink" id="Site3"><a href="https://example.com/Site3/Default.htm">Site 3</a>
        </li>
        <li class="XLink" id="Site4"><a href="https://example.com/Site4/Default.htm">Site 4</a>
        </li>
      </ul>
    </div>

Next, you'd have to detect the address change via JS

window.onhashchange = function(){
   links = document.getElementsByClassName("XLink")
             .forEach(link =>{
                  if(location.href.includes(link.id){
                       link.classList.add("active");
                       break;
                    }
             })
}

PS: this is just a trivial solution, assuming your website's URL dont have edgecases like https://example.com/Site1/page/Site3/Something.htm . For which you need to do a more fine grained regex match.

Definitely not the cleanest of the solutions though.