Results 1 to 2 of 2

Thread: [RESOLVED] Javascript Navigation & CSS

Threaded View

  1. #1
    Join Date
    Oct 2012

    resolved [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"

    <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;}
    <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";
    <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 &amp; Prizes</a>
    Last edited by maggiemkfung; 02-05-2013 at 12:13 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center