Question

I have a navigation bar that I include using SSI in every page of a small site. Something like this:

<ul>
   <li><a href="option1.shtml">option 1</a></li>
   <li><a href="option2.shtml">option 2</a></li>
   <li><a href="option3.shtml">option 3</a></li>
</ul>

In each page I want to highlight the selected option (maybe with bold) and disable the “self” link.

As I’m not using any Server Side technology as PHP or .NET, I think this could be achieve using JavaScript.

Many thanks.

Answer 1

What’s interesting about the example that you list is that the options are actually links! Are the links handled in Javascript? This is somewhat important to determine the answer to the question, so my answer will inherently be a bit general.

The following method I’m describing assumes that there are a tags with href attributes in the list items.

First use document.URL to grab the current page’s URL. Store that in a variable url. Then use url.substr(url.search('www.beginning.com/of/URL/before/links/start/')) to get the part of the URL that would be in the link-, e.g. index.html. Finally, find the link with href="index.html" and use removeAttribute("href") to remove its href attribute. In addition add a class called thisPage to the element so that in CSS you can highlight it and remove the pointer cursor:

.thisPage
{
    cursor: default;
    font-weight: bold;
}

Please tell me if this was helpful and whether you have any questions.