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.

Code:

<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???

Thread: highlight current tab

Thread Tools

Search Thread

highlight current tab

Anyone? help please?

Bookmarks

Bookmarks

Posting Permissions