| udayan on Jun 25, 2007 at 5:52:20 AM I myself found the solution. I am providing the solution so that others might find it useful.
1.Place this script in the HTML calling page
<script type="text/javascript">
function synchTab(frameName) {
var elList, i;
// Exit if no frame name was given.
// Check all links.
elList = document.getElementsByTagName("A");
for (i = 0; i < elList.length; i++)
// Check if the link's target matches the frame being loaded.
if (elList[i].href == parent.framename.location.href)
{
elList[i].className += " activeTab";
}
else
{
removeName(elList[i], "activeTab");
}
}
function removeName(el, name) {
var i, curList, newList;
if (el.className == null)
return;
// Remove the given class name from the element's className property.
newList = new Array();
curList = el.className.split(" ");
for (i = 0; i < curList.length; i++)
if (curList[i] != name)
newList.push(curList[i]);
el.className = newList.join(" ");
}
</script type>
2.Place the below script in the pages which needs to be called.
<script type="text/javascript">
window.parent.left.synchTab(window.name);
</script>
3.paste the below tags in style sheet
a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
font-family: Arial, Verdana, Helvetica, sans-serif; font-size:11px;
font-weight: bold; text-decoration:none; color: #333; border : 1px double white;
}
and thats it ... what u expected will work ... :)
Logic: it matches the current href with the target href and if they are same its appending some style ie: active tab(different style)
| 
Higlighting active tab