Highlighted Selected Content in Menu - WebSphere Content Management System

In a WebSphere Portal page, I inserted a few Web Content Viewer portlets. The top portlets shows a menu list the content. The bottom portlet will display the selected content from the list. The issue I had was highlighting the selected content in the menu.

From the forum, there were some suggestions but it didn't work for my case.

I manage to solve it by using the Content ID. The idea is, when the content is loaded, it can find which link in the menu is selected by the Content ID. Thus you can add in code to change the attributes.

In the menu component, I add in a class which is the content ID into the links.

<A HREF="<Placeholder tag="href"/>" class="<Placeholder tag="Idnum"/>"><Element context="autoFill" type="content" key="headline"/></A>

Then in the presentation template I added dojo code to put in another class into the selected content.

<script>
dojo.addOnLoad(function(){
dojo.query(".<IDCmpnt context="current" type="content" field="id"/>")
      .addClass("selectedContent")
});
</script>
<style>
.selectedContent{color:black;font-weight:bold;}
</style>

Thus when the content is loaded, it will search the page for the class <Idnum> and add in the class selectedContent. For the Idnum here, I use a class instead of id because in certain pages, there are more than 1 links to the same content.