PDA

View Full Version : highlight current tab



Peter Johnson
07-10-2007, 04:19 PM
I'm using javascript to change the background color of the current link in a tabbed menu. It works fine.

But I can't figure out how to modify it so that the tab is highlighted on the initial page, when someone first comes to the site. Any help, as always, greatly appreciated.



<html>
<head>
<style type="text/css">

#tabbedlinks{
padding: 2px;
margin: 0;
font: 14px arial;
}

#tabbedlinks li{
list-style: none;
display: inline;
margin: 0;
}

#tabbedlinks li a{
text-decoration: none;
padding: 3px 0.5em;
border: 1px solid #000;
border-bottom: none;
}

#tabbedlinks li a:active {
background-color:yellow;
}

</style>



<script>
var highlightLink = function () {
var active = null, color = 'yellow';
if (this.attachEvent) this.attachEvent('onunload', function () {
active = null;
});
return function (element) {
if ((active != element) && element.style) {
if (active) active.style.backgroundColor = '';
element.style.backgroundColor = color;
active = element;
}
};
}();
</script>
</head>
<body>


<ul id="tabbedlinks">
<li><a href="http://www.google.com" target="tabiframe" onclick="highlightLink(this);">Google</a></li>
<li><a href="http://www.yahoo.com" target="tabiframe" onclick="highlightLink(this);">Yahoo</a></li>
<li><a href="http://www.ask.com" target="tabiframe" onclick="highlightLink(this);">Ask</a></li>
</ul>

<iframe id="tabiframe" name="tabiframe" src="http://www.google.com" width="800" height="350px"></iframe>

</body>
</html>

Peter Johnson
07-12-2007, 03:53 AM
Anyone have any ideas??? Alternatives???