www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] Javascript Navigation & CSS

Hybrid View

  1. #1
    Join Date
    Oct 2012
    Posts
    10

    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"

    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 &amp; Prizes</a>
    </div>
    Last edited by maggiemkfung; 02-05-2013 at 11:13 AM.

  2. #2
    Join Date
    Oct 2012
    Posts
    10
    Added
    Code:
    <script language="javascript">
    Highlight();
    </script>
    at the end of the navigation file...

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



Recent Articles