[RESOLVED] Javascript Navigation & CSS
I was once able to get this to work, and now it doesn't. Any idea what's going on? The styles are simply to stylize them. The JavaScript is meant to read the URL to see if we're currently on that page, if we are on that page, it will change the "className" to "on"
Code:
<style type="text/css">
#navigation {font-family:Arial, sans-serif; font-size:14px; margin-top:26px; margin-right:39px; }
#navigation A.tab { text-decoration:none; color:#000000; margin-bottom:5px; padding:2px;}
#navigation A.tab:Hover {text-decoration:none; color:#ffffff; background-color:#000000; margin-bottom:5px; padding:2px;}
#navigation A.tabOn {text-decoration:none; color:#000000; background-color:#fff200; margin-bottom:5px; padding:2px;}
</style>
<script language="javascript">
function Highlight()
{
navigationContainer = document.getElementById("navigation");
navArray = navigationContainer.getElementsByTagName("a");
if (document.URL.indexOf("products.html") != -1)
{
navArray[0].className = "tabOn";
}
else if (document.URL.indexOf("in-the-lab.html") != -1)
{
navArray[1].className = "tabOn";
}
else if (document.URL.indexOf("special-offers.html") != -1)
{
navArray[2].className = "tabOn";
}
else if (document.URL.indexOf("games.html") != -1)
{
navArray[3].className = "tabOn";
}
}
Highlight();
</script>
<div id="navigation">
<a href="products.html" class="tab">Our Products</a>
<a href="in-the-lab.html" class="tab">In Your Lab</a>
<a href="special-offers.html" class="tab">Special Offers</a>
<a href="games.html" class="tab">Games & Prizes</a>
</div>
