| udayan on Jun 25, 2007 at 5:52:20 AM (# 2) 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)
|