JavaScript to change link style when link is selected?

[MizzBia]

Hello,
I'm just wondering if anyone knows of a script/code that would allow me to dynamically style selected links? I'll explain:

I'm building a e-commerce store using a Perl/CGI cart. I have layout templates for each of the main categories. On each of these category templates, I am adding a HTML menu of the sub-categories (tops, t-shirts, sweaters, etc...) within that main category using an unordered list.

What I would like is to apply a different style to the link when the user is currently on that page. For example, if they are on the 'Tops' sub-category page, I would like for the 'Tops' link within the menu to be bold.

I cannot manually add the class to the link because the page is displayed dynamically using this 'main' template therefore all sub-categories will be displaying using the same layout.

Is there a script/code I can use that could achieve this in another way?

[iroot]

I see only one way to do that(but not pretty way). Get current url, get all menu items hrefs and compare current url with menu hrefs with regular expression.

[lexipixel]

This would make the link to the currently loaded page bold, (if it matched one of the Javascript "if" conditions).

<div id="nav">
<a id="linktops" href="tops.htm">Tops</a><br>
<a id="linkpants" href="pants.htm">Pants</a><br>
<a id="linkshoe" href="footwear.htm">Shoes</a><br>
</div>
<script type="text/javascript">
if(location.href.indexOf('/tops.htm') != -1) {
document.getElementById('linktops').innerHTML = '<b>Tops</b>';
}
if(location.href.indexOf('/pants.htm') != -1) {
document.getElementById('linkpants').innerHTML = '<b>Pants</b>';
}
if(location.href.indexOf('/footwear.htm') != -1) {
document.getElementById('linkshoe').innerHTML = '<b>Shoes</b>';
}
</script>

You could style it anyway you want and also could use CSS classes for the active or inactive links.