Question

I have a navigation menu within a page on my site, which has JavaScript applied to it to highlight the currently selected link.

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.

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.

Here is the coding used for the nav menu within the "writing" page:

<div id="article-nav-container">
    
        <ul id="article-nav-pg">
            <li><a href="articles.php?article=article_name1#articles-top">1</a></li>
            <li><a href="articles.php?article=article_name2#articles-top">2</a></li>
            <li><a href="articles.php?article=article_name3#articles-top">3</a></li>
            <li><a href="articles.php?article=article_name4#articles-top">4</a></li>
            <li><a href="articles.php?article=article_name5#articles-top">5</a></li>
            <li><a href="articles.php?article=article_name6#articles-top">6</a></li>
        </ul>
        
        <script type="text/javascript">
                $(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
                }
            });
        });
        </script>
        
    </div><!-- end articles nav -->

The coding for the homepage nav (no JavaScript) is:

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

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.

Here is the link to the site: here

Thanks,

gdinari

Answer 1

The links on the homepage look like this: articles.php?article=article_name4.

The links off the homepage look like this:articles.php?article=article_name4#articles-top

When you click on the first link, it checks to see if that latter URL is a substring of the former URL. It isn’t, so nothing is selected.

Is #articles-top actually necessary at all?