Javascript activate on page load
<p>I have a navigation menu within a page on my site, which has javascript applied to it to highlight the current selected link. </p>

<p>The problem is I have the same menu on my homepage and when I click a link on the homepage, it goes to the intended section, but it doesn't initially highlight the corresponding link. </p>

<p>For example, on the home page there is a nav menu with links [1, 2, 3, 4, 5, 6]. Now on the "writing" page within the site, there is also the same nav links {1, 2, 3, etc..] The links on the "writing" page have javascript applied, so when a link is clicked it will highlight the selected link. But when I click link 1 from the homepage it will go to the link 1 on the "writing" page but the link wouldn't be highlighted. I would have to click another link and then go back to it to highlight it.</p>

<p>Here is the coding used for the nav menu within the "writing" page:</p>

<pre><code>&lt;div id="article-nav-container"&gt;

        &lt;ul id="article-nav-pg"&gt;
            &lt;li&gt;&lt;a href="articles.php?article=article_name1#articles-top"&gt;1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="articles.php?article=article_name2#articles-top"&gt;2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="articles.php?article=article_name3#articles-top"&gt;3&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="articles.php?article=article_name4#articles-top"&gt;4&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="articles.php?article=article_name5#articles-top"&gt;5&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="articles.php?article=article_name6#articles-top"&gt;6&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;

        &lt;script type="text/javascript"&gt;
                $(document).ready(function() {
            var loc = window.location.href; // The URL of the page we're looking at
            $('#article-nav-pg a').each(function() {
                if (loc.indexOf(this.href) !== -1) { // If the URL contains the href of the anchor
                        $(this).addClass('selected'); // Mark it as selected
                }
            });
        });
        &lt;/script&gt;

    &lt;/div&gt;&lt;!-- end articles nav --&gt;
</code></pre>

<p>The coding for the homepage nav (no javascript) is: </p>

<pre><code>&lt;ul id="article-nav"&gt;
        &lt;li&gt;&lt;a href="articles.php?article=article_name1"&gt;1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="articles.php?article=article_name2"&gt;2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="articles.php?article=article_name3"&gt;3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="articles.php?article=article_name4"&gt;4&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="articles.php?article=article_name5"&gt;5&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="articles.php?article=article_name6"&gt;6&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
</code></pre>

<p>I would appreciate any help on how to link the javascript effect to the homepage nav menu, so that when a link is clicked the corresponding page will load with the link selected. Using the existing javascript or any other technique. Hope this wasn't too confusing.</p>

<p>Here is the link to the site: <a href="http://www.skyviewmarketing.net/clients/Cheryl/index.php" rel="nofollow">here</a></p>

<p>Thanks,</p>

<p>gdinari</p>
